jquery autocomplete with hidden id

 

jquery autocomplete works fine till you just use it to select some sting value and pass it to a server. But what if you need to pass not string label of the selected value but related to it id?

It's hard to override this behaviour (at least was for me). First of all there is a lot of solutions in the web

Such as custom widgets:
http://code.google.com/p/jquery-autocomplete/source/checkout
http://flux88.com/2009/06/jquery-autocomplete-with-a-hidden-value/
Won't use because of poor documentation and support

Or simplistic solutions like this one:
http://www.petefreitag.com/item/756.cfm
Here all works fine but some underlying issues are neglected: when you typed some text and out of input control before request to the server complete the id value not changed.

After searching the web more meticulously found this usefull pages:

Old-version:
http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

Migration guide:
http://www.learningjquery.com/2010/06/autocomplete-migration-guide
Release notes:
http://blog.jqueryui.com/2010/08/extensible-autocomplete/

Extension for current widget:
https://github.com/scottgonzalez/jquery-ui-extensions/blob/master/autocomplete/jquery.ui.autocomplete.selectFirst.js

Why old version mentioned? Because it has two very usefull methods which serve exactly for my purpose, unfortunately they are "depricated" in new version and at this point we have to use extension to help with.

Again the lack of this functionality in current version of jquery plugin is common, for examp:

Sebastian
July 31, 2010 at 4:39 pm
HI there, I have a question about the selectFirst option - you say it is gone with no need for replacement, but I disagree.

I have a strong case for an instance where I need to be able to input something - say the word 'Widget'. If present in the source list I have, 'Widget' contains all kind of other information such as ID's that I need to have access to when the user blurs out of the autocomplete.

However if I type out 'Widget' in the autocomplete and just tab out without selecting the matching item 'Widget' from the dropdown list, this item is never selected and I don't get that extra data. This is bad behavior, at least for my needs, and there's got to be a way to address this issue. Do you have any solutions or workarounds?

But even using extensions the solution is not out of box;
at first glance this fits -
https://github.com/scottgonzalez/jquery-ui-extensions/blob/master/autocomplete/jquery.ui.autocomplete.autoSelect.js
but actually it works only for static list, not for server queries.

This way I couldn’t find in the web implementation which suits to my purpose and here you could see custom implementation of my plugin.

Main feature of this extension is:

The value of hidden input  filed will be changed either user directly select item from the list or user typed it before list was actually filled with item from the server, if one of the values from the server corresponds to text in input control, the corresponded id value will be set to the hidden field, if typed value isn’t contained in the list the hidden value will be reset to null.

<input type=”text” id=”item_label” data-autocomplete-for=”item_id” data-autocomplete-srv = “…” data-autocomplete-respformat=”…”/>

<input type=”hidden” id=”item_id”/>

$(“#item_label”).autoComplete(srvBaseUrl);

Ini params:

srvBaseUrl – base url to the srevice which provides data for control

examp:

$(“#item_label”).autoComplete(“http://localhost:58486/SomeODataService.svc”);

Attributes:

1. data-autocomplete-srv – Request to the service

Examp:

data-autocomplete-srv="Persons?$select=Id,NickName&$filter=startswith(NickName, '{0}')"

2. data-autocomplete-respformat – Format of the JSON response from the srevice

Format is  “KeyValue, LabelValue, ListValue” where:

KeyValue – value which will be set as id value (value of hidden control)

LabelValue – value which will be shown as selected value for input control

ListValue – value which will be shown in selection list of input control

Examp:

data-autocomplete-respformat = "Id,NickName,NickName"