autocompete with ajax

Is possible use autocompete plugin with ajax? For data load from server, something like this (but not woking):

$.ajax({
    url: $this.attr('data-url'),
    method: 'post',
    data: {
         city: $this.val()
    },
    dataType: 'json',
   success: function (res) {
          if (res != false) {
                $this.autocomplete({
                     data: res
                });
          }
     }
});

[designosis]

I came up with something that works pretty great. It requires jquery.auto-complete.min.js and jquery.auto-complete.css from https://github.com/Pixabay/jQuery-autoComplete … which is beautifully coded, and only requires 3.4k.

Let’s say you want an autocompleted city search input that shows the city name but returns the city_id …

HTML:

    <div class="row">
        <div class="input-field">
            <input type="hidden" id="city_id" name="city_id" value="">
            <input id="city_autocomplete" name="city_autocomplete" type="text">
            <label for="city_autocomplete">In which city do you live?</label>
        </div>
    </div>

(Note the hidden input. The code below modifies this value.)

JS:

    $('#city_autocomplete').autoComplete({
        source: function(term, response){
            $.getJSON('/path/to/search.php', { q: term }, function(data){ response(data); });
        },
        renderItem: function (item, search){
            // escape special characters
            search = search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
            var re = new RegExp("(" + search.split(' ').join('|') + ")", "gi");
            return '<div class="autocomplete-suggestion" data-id="'+ item[0] +'" data-val="' + item[1] + '">' + item[1].replace(re, "<b>$1</b>") + '</div>';
        },
        onSelect: function(e, term, item){
            $('#city_id').val( item.data('id') );
        }
    });

(The renderItem is nearly identical to the default, just modified the return. If, like me, you will only ever do this kind of autocomplete, you can just replace that line in the source code, and omit the renderItem from the call above. With a bit more work, this could be modified to not require #id selectors in either JS or HTML.)

PHP:

    require '/path/to/requires.php';

    $res = [];
    $sql = $db->query("SELECT `id`,`name` FROM `cities` WHERE `name` LIKE '%". safeGET($_GET['q']) ."%' LIMIT 10");
    while ($r = $sql->fetch()) {
        $res[] = [$r['id'],$r['name']];
    }
    echo json_encode($res);

(Basically the PHP just outputs a JSON array like [[255,'New York'], [1261,'New Orleans'], [8212,'Newark'], ...]. Be sure to replace safeGET() with your own injection proofing methods.)

[dellert]

So, get it here https://github.com/dellert/autocompleteajax