CODEWITHSUNDEEP
jquery-uigrailsautocomplete
monty_bean
monty_bean

Reputation: 514

jQuery UI Autocomplete, please explain this part of the code

I'm trying to do muti-values autocomplete. http://jqueryui.com/autocomplete/#multiple

I am trying to make sense of the code but I cannot figure out the response part. (I am new to javascript. I'm doing a project in Grails which I started to learn just a month ago... I'm a total newbie...)

  .autocomplete({
    minLength: 0,
    source: function( request, response ) {
      // delegate back to autocomplete, but extract the last term

      response( $.ui.autocomplete.filter // Please explain this part for me
          (availableTags, extractLast( request.term ) ) );

Please explain response( $.ui.autocomplete.filter part for me. Also if I want to use JSON source from my Grails controller, how can I replace availableTags?

Thanks in advance.

Upvotes: 0

Views: 412

Answers (1)

pratikpawar
pratikpawar

Reputation: 2098

FWIK code you posted is part of initialization of widget. While initializing you need to mention the source for the dropdown. Source can be one of following: 

    1) Array 
    2) String 
    3) Function( Object request, Function response( Object data )

To answer response part: It is a function which takes care of filtering the result for widget.

To answer JSON source part: If Source is JSON then you need to specify the host who will be serving that JSON. Whenever user types in on widget there will be call to host with request parameter named as TERM. So you need to make sure to filter it from request and return the JSON for that request.

Read more about it here: View source for function in autocomplete with Array as input. http://jqueryui.com/autocomplete/#multiple

View the Source definition and API docs: http://api.jqueryui.com/autocomplete/#option-source

Response under event on API documentation is different than response mentioned in posted code above.

For ui.autocomplete.filter method refer to source code of the JS that is being imported that might give you better understanding of the code. But as per my understanding response function being called in above code under source is a callback to delegate back to autocomplete after extracting last term from array.

ui.autocomplete.filter method will filter the desired elements from list being provided and callback the same function to extract more. As I read it does pull one element out at a time. (refer to extract and split functions in under view source above)

Sorry for the big answer but read the documentations and other posts, article about it that would give better idea about the code.

Upvotes: 2

Related Questions