Geek asks and answers

JQuery UI autocomplete - results are not displayed if the input does not match the result set

Short version of the problem

Autocomplete works when the input line matches the result line, but not otherwise. Data is successfully deleted from JSON.

Longer version

I want to dynamically edit the original autocomplete content with JSON data.

The approach below works when the search string matches the first_name and last_name fields.

But the JSON URL returns more, for example. when searching by username, it still returns the correct data. But this is not shown in autocomplete, and my theory is that autocomplete UI causes the "input value" to be the same as the "result value".

JSON data is returned:

[
        {"pk": 1012912, "fields": {"first_name": "Barack", "last_name": "Obama"}}, 
        {"pk": 1017519, "fields": {"first_name": "George", "last_name": "Bush"}}
]

Autocomplete code

, .

$('#search').autocomplete({
    source: [],
    search: function(event, ui){
        results = [];
        var json = jQuery.getJSON('http://jsondata.com?query='+event.target.value, function(data){
            for (var i=0; i<data.length; i++){
                results.push(data[i].fields.first_name + ' ' +data[i].fields.last_name); 
            };
        }).success(function(){
            $('#search').autocomplete('option', 'source', results);
            //The following debug proves that the 'results' are correct, even on search for usernames
            console.log(results);
        });
    },
});

" " #search, , . , "baracko", , JSON ( console.log), .

- , ?

googlers ,

ek_ny JSON:

[{ 'value' : 'Barack Obama'}, { 'value' : 'George Bush'}]

:

$('#search').autocomplete({
    source: function(req, res){
        jQuery.getJSON('http://jsondata.com/?query='+req.term, req, function(data){  
            var results = [];
            $.each(data, function(i, val){
                results.push(val.value)
            });
            //Add results to callback       
            res(results);
        });           
    },
});
+3
2

, , -. source, jQuery. ajax [{ "id": 1, "label": "Annie Hall",.....]. Ajax, , , . , .

        $("#movieSearch").autocomplete({
            source: function(req, res){
                $.getJSON(
                    "search.aspx",
                    {term : req.term},
                    function(data){
                        res(data);//you can also modify your results before you call res()
                    }
                );
            }
);

, , - , , , . ( ), .

+4

, ,

source: function( request, response ) {
    $.getJSON( url, {
        term: extractLast( request.term )
    }, response )
    .error(function() {
        console.log("no results");
    });
},
0

More articles:


All Articles