CODEWITHSUNDEEP
javascriptjqueryjquery-uiautocompletejquery-ui-autocomplete
Shivay
Shivay

Reputation: 145

jQuery Autocomplete for a JSON

My JSON is like this 

var data = [{"code":"1162","format":"Subscription","name":"Picture Manager ","action":"202"},
{"code" : "1094","format":"Store","name":"Listing Designer","action":"168"},
{"code" : "1407","format":"Subscription","name":"MOTOR_PACKAGE","action":"403"},
{"code" : "1024","format":"Fixed Price","Name":"Picture","action":"120"},
{"code" : "1051","format":"Auction","name":"Gallery Days","action":"49"},
{"code" : "5059","format":"Lead Generation","name":"Scheduled Listings","action":"160"}];

I am able to create a suggest function like

jQuery

$(document).ready(function(){
    serverurl = "getJson";
    $.getJSON( serverurl, function(data) {
        $("#feeCode").autocomplete({
            source: function (request, response) {
                response($.map(data, function(v,i){
                    return {
                             label: v.format+' / '+v.name+' ('+v.code+')' ,
                             value: v.format+' / '+v.name+' ('+v.code+')'
                    };
                }));
            }
        });
    }); 
});

HTML

<input class="catinputbox" type="text" id="feeCode" >

It will show the suggestion like this

Auction / Gallery Days (1051)
Fixed Price / Picture (1024)

But it is not searching the pattern the suggestions are static. I want to search and give the appropriate suggestion for the string he is providing. Like if he types "Fixed" the suggestion should be "Fixed Price / Picture (1024)" or if he types "Days" or "1051" then "Auction / Gallery Days (1051)".

I have never used the autocomplete before so if any one can explain me autocomplete, request, response and search. That will be very helpful for me

Upvotes: 2

Views: 491

Answers (1)

Andrew Whitaker
Andrew Whitaker

Reputation: 126042

You're close, just a few tweaks:

$(document).ready(function() {
    serverurl = "getJson";

    $.getJSON(serverurl, function(data) {
       /* When the response comes back, create an array of objects that the 
        * autocomplete widget can use, using `$.map`:
        */
        var autocompleteData = $.map(data, function(v, i) {
            return {
                label: v.format+' / '+v.name+' ('+v.code+')' ,
                value: v.format+' / '+v.name+' ('+v.code+')'
            };
        });

        /* Initialize the autocomplete widget with the prepared data: */
        $("#feeCode").autocomplete({
            source: autocompleteData
        });
    }); 
});

Example: http://jsfiddle.net/fny66zkd/

In this case, you don't need to supply a function to the source parameter. You do this if you want to perform a custom AJAX request or some other type of custom filtering function.

Your code wasn't working before because when you supply a function to the source parameter, you're essentially telling the widget that you want to do the filtering.

I have never used the autocomplete before so if any one can explain me autocomplete, request, response and search. That will be very helpful for me

  • The source option can be supplied a callback function (or a string, or an array). This function accepts two parameters, request and response.
    • request is an object containing information about what the user typed. You can access what they typed by accessing request.term.
    • response is a callback function that jQueryUI passes your function. You call this function when you're ready to notify the widget of a resultset you want to show the user.
    • More information is available in the official documentation.
  • The search method manually invokes the autocomplete widget's searching functionality. Again, more information is available in the official documentation.

Upvotes: 2

Related Questions