JQuery Autocomplete source is a function

Question

I'm using JQuery UI autocomplete, for different fields. To get the data i'm using a function as the source. It work great! I was wondering if there were a way of not using the anonym function in the source, but to declare a generic one which will have a parameter to redirect to the right URL. I'm quite new in JS and JQuery and so I have no idea of what the parameters request and response are comming from in the anonym function. Here is what I'm trying to do:

    $ac.autocomplete({
        //Call the function here, but what are the parameter request and response???
        source: autocomplete(),
        minLength: 1
    });

Here is the function I'd like to call

function autoComplete(request, response, url) {
    $.ajax({
        url: '/Comp/'+url,
        dataType: "json",
        type: "POST",
        success: function (data) {
            response($.map(data, function(item) {
                return { label: item, value: item, id: item };
            }));
        }
    });
}

Thanks a lot for your help.

Oleg · Accepted Answer · 2011-12-22 10:52:36Z

3

You should use

source: autoComplete

instead of

source: autocomplete()

One more remark. The default implementation of jQuery UI Autocomplete use only value and label and not use id.

edited Dec 22, 2011 at 10:52

answered Nov 17, 2011 at 9:56

Oleg

222k36 gold badges414 silver badges826 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Felix Eve Over a year ago

ID is a default field, see the example source code here: jqueryui.com/autocomplete/#remote

Oleg Over a year ago

@FelixEve: Sorry, but I disagree with you. The documentation describes only two standard representation of the server response: array of strings and array of items with value and label properties. If the items have some other custom properties the properties will be just saved, but not used in any way by jQuery UI Autocomplete. One have to overwrite _renderItem method for example to use the properties like id during rendering or selection.

semuzaboi · Accepted Answer · 2013-01-25 07:45:15Z

Reformatting ur question will pose as solution to the problem .:)

 $ac.autocomplete({
     minLength: 1 ,
     source: function(request, response, url){
                var searchParam  = request.term;

    $.ajax({
              url: '/Comp/'+url,
             data : searchParam,
             dataType: "json",
            type: "POST",
            success: function (data) {
                    response($.map(data, function(item) {
                    return { 
                        label: item.Firstname,
                        value: item.FirstName
                        };
                    });
                    }
            });//ajax ends 
            }
 }); //autocomplete ends

The request and response objects are expected by jQuery UI . The request.term will give u the text that the user types and the response method will return the label and value items to the widget factory for displaying the suggestion dropdown

P.S : assuming ur JSON string contains a FirstName key !

user2472312 · Accepted Answer · 2013-11-18 14:50:21Z

I will give an example of a situation that happened to me, might serve as an example:

Situation: After the user selects a keyword with Jquery Autocomplete not allow it to be listed. Taking into account that the query is executed the same, ie the unamended cat. server-side.

The code looked like this:

$( "#keyword-search" ).autocomplete({
    minLength: 3 ,
    source: function( request , response ) {
        var param = { keyword_type: type , keyword_search: request.term } ;
        $.ajax({
            url: URI + 'search-to-json',
            data : param,
            dataType: "json",
            type: "GET",
            success: function (data) {
                response($.map(data, function( item ) {
                    /* At this point I call a function, I use to decide whether to add on the list to be selected by the user. */
                    if ( ! is_record_selected( item ) ) {
                        return item;
                    }
                }));
            }
        });
    } ,
    select: function( event , ui ) {
        /* Before you add, looking if there is any cell */
        /* If it exists, compare the id of each cell not to add an existing */
        if ( validate_new_keyword( ui ) ) {
            add_cell( ui ) ;
        }
    } ,
});

/* Any validation... */
function validate_new_keyword( ui ) {
    var keyword_id = $.trim(ui.item.id) ;
    Any condition...
    if (keyword_id > 0) {
        return true ;           
    }

    return false ;
}

/* This function checks if a keyword has not been selected by the user, it checks for the keyword_array. */
function is_record_selected( item ) {
    var index = jQuery.inArray( item.id , keyword_array ) ;
    return index == -1 ? false : true;
}

Obs: Thus it is possible to use a function inside "source" and "select". =p

Collectives™ on Stack Overflow

JQuery Autocomplete source is a function

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related