CODEWITHSUNDEEP
jqueryautocomplete
Amit
Amit

Reputation: 107

Jquery autocomplete not matching to typing

I'm using Jquery autocomplete to display list of customers. The initial list displays but it doesn't filter according to my typing. Here is the code html:

 <input type="text" name="cust_display" id="cust_display" value="" />

Javascript:

$(function() {
    $( "#cust_display" ).autocomplete({
        source: "includes_ajax/inc.help.php",
        minLength: 2,
        dataType: "json",
        select: function( event, ui ) {
            alert( ui.item ?
                "Selected: " + ui.item.value + " aka " + ui.item.id :
                "Nothing selected, input was " + this.value );
        }
    });
});

The data is in json format, and as the initial list displays (I can scroll down and select) I know it's ok. Need some help here. What am I missing?

Here is the sample json response

[{"value":"ELIAS VERGARA","id":"68"},{"value":"Geoff Smith","id":"69"},{"value":"Gilbert","id":"73"},{"value":"Jeremy Kinder","id":"57"},{"value":"Kim, 46307","id":"70"},{"value":"michael Shoulson","id":"71"},{"value":"michael Stettbacher","id":"60"},{"value":"Renata Ince, 21076","id":"58"}]

Upvotes: 0

Views: 471

Answers (1)

Adam Cherti
Adam Cherti

Reputation: 982

It is normal, check this http://api.jqueryui.com/autocomplete/

String: When a string is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. It can be on the same host or on a different one (must provide JSONP). The Autocomplete plugin does not filter the results, instead a query string is added with a term field, which the server-side script should use for filtering the results. For example, if the source option is set to "http://example.com" and the user types foo, a GET request would be made to http://example.com?term=foo. The data itself can be in the same format as the local data described above.

Jquery don't filter the array when you provide him an url with json data. Instead, you have to filter it in your php code in inc.help.php like that for example :

// Suppose we already have the array
$array =  array(array("value"=>"ELIAS VERGARA","id"=>"68"),array("value":"GeoffSmith","id"=>"69")); // ... i will not put all the values

if( isset($_GET['cust_display']) )
    $filter_word = $_GET['cust_display'];
else
    $filter_word = false;

if( $filter_word)
{
    for($i = 0; $i < count($array); $i++)
    {
         if( !stristr($array[$i], $filter_word) )
             unset( $array[$i] );
    }
}

// Then print $array as json format

But you have an alternative : do an ajax request, bring the json data from inc.help.php to an array and then you can set it as a source for autocomplete and it'll work automatically. But the array will naturally not be updated unless you make a function updating the array, called every x seconds or whenever the user types in something in the input.

Upvotes: 1

Related Questions