开发者

Customize jquery autocomplete result

I'm using the jQuery autocomplete with a remote data source

    $( "input#searchbar" ).autocomplete({
        source: function( request, response ) {
            $.ajax({type: "开发者_如何学JAVApost",
            mode: "abort",
            dataType: 'json',
            url: 'index.php/ajax/autosuggest',
            data: { term: $("#searchbar").val()},
            success: function(data) {

                response(data);
            }
        });
    },
    select: function(e, ui) {
        //Refresh pros
        if (map){
            mouseUpOnTheMap();
        }
    }
});

It works really well. When i type "a" there is a list of activity (fetched from a database) starting with that are listed. What i would like to do it's add a custom parametre (the ID of the activity) in the result.

Because when a user select an activity later I will have to "re-do" a sql search to get the ID of the activity...

So is there a way to include the activity id in the returned JSON from the autocomplete ?

THanks


If your index.php/ajax/autosuggest page returns an array of JSON objects with two keys of "label" and "value" (instead of an array of strings), the the jQuery UI Autocomplete plugin with use the "label" key to display in the autocomplete list, but actually give you the JSON object that was selected in the select event. Then you can reference the value of the object.

$( "input#searchbar" ).autocomplete({
        source: function( request, response ) {
            $.ajax({type: "post",
            mode: "abort",
            dataType: 'json',
            url: 'index.php/ajax/autosuggest',
            data: { term: $("#searchbar").val()},
            success: function(data) {
                //data assumes [{label: "result 1", value: 1}, {label: "result 2", value: 2}];
                response(data);
            }
        });
    },
    select: function(e, ui) {
        var selectedItem = ui.item;
        var id = selectedItem.value;
        var label = selectedItem.label;

        //Refresh pros
        if (map){
            mouseUpOnTheMap();
        }
    }
});

I haven't tested thist, just found it here: http://www.petefreitag.com/item/756.cfm


The way Wesley described is what we're currently using as well.

By returning both label and id in our JSON objects we are able to grab that id handle it in the way we want (in our case, storing it in a hidden input), while the label is being used to show our users which record is selected.

Basic example: http://jsfiddle.net/NLK5p/4/


Which datasource are you using ? I strongly suggest freebase it's a free database within more than 12 millions of voices and it provides a web services for the autosuggestion (included js functions) in the most miscellanous fields (jobs, sports, actors, movies or whatever you wish)... not everybody knows about it but google bought the project last year (it still available and free) so it should be a promising web service for datasources.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜