开发者

Jquery Autocomplete with json and using parameters

开发者 https://www.devze.com 2023-02-14 22:50 出处:网络
I am trying to do an autocomplete input field. Everytime a user type a letter in that field, the value of the field is sent to the server and the server answer with words that match.

I am trying to do an autocomplete input field. Everytime a user type a letter in that field, the value of the field is sent to the server and the server answer with words that match.

var acOptions = {
             source:function (request, response) {
                 $.ajax({
                     url: "index.php?option=com_fmw&view=keywords_api&controller=keywords_api&format=raw", 
                     type: "GET", dataType: "json",
                     data: { expr: request.term},
                     success: function (data) {
                         response($.map(data, function (item) {
                             return item.value;
                         }))
                     }
                 })
                 }, 
     minChars: 1,
     dataType: 'json'
};

$( "#search_box_input" ).autocomplete(acOptions);

This is an example of data from the server:

[{"value":"开发者_开发百科Greater"},{"value":"great"},{"value":"greatly"},{"value":"Greater-Axe"}]

The previous code do the right request to the server (and the server answer right) but it does not display anything in the text field.

I tried to do the autocomplete without an explicit ajax object but then I couldn't send the current value of the field (parameter "expr" of the request) to the server:

var acOptions = {
        source: "index.php?option=com_fmw&view=keywords_api&controller=keywords_api&format=raw&expr=",
        minChars: 1,
        dataType: 'json'
};
$( "#search_box_input" ).autocomplete(acOptions);

Thank you for your help!


You can use jQuery to pull the value of your field to add it to URL parameter string.

var acOptions = {
        source: "index.php?option=com_fmw&view=keywords_api&controller=keywords_api&format=raw&expr=" + $('#ID_OF_YOUR_TEXTBOX').val(),
        minChars: 1,
        dataType: 'json'
};
$( "#search_box_input" ).autocomplete(acOptions);
0

精彩评论

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