jQuery UI Autocomplete with hybrid text/id search

Question

I\'m having a lot of trouble making jQuery\'s autocomplete widget work for me. I am using a list of key/value pairs from a server.

I have the following requirements

Answer 1

You can use event.preventDefault

Collect your selected values through ui.item.label or ui.item.value and get the needed value and set it to the same textbox.

var idNameCombo = ui.item.label;
            event.preventDefault();
            $("#mID").val(idNameCombo.split(",")[0].trim());

Answer 2

Though its an old question, my method can help.

On .change event you can search for the textbox value with the value in from your Source list using loop.

Goto for more details: Here it is in Ajax source list but workout is similar. Search a text In Jquery AutoComplete Ui

This thing had been troubling me many times and eventually now i figured it out :)

Answer 3

When i presume you have the following fields set:

<div>
    <input type="text" name="visible" class="autocomplete-reference" />
    <input type="hidden" name="hidden" />
</div>

You need to init following js (it works with jQuery 1.5.2):

$(document).ready(function() {
    $('.autocomplete-reference').each(function () {
        $(this).keydown(function(e){
            /*
            * this will reset hidden id reference on each visible field manual change
            * we have to bind it on keydown because we want to recognize event of submiting form by enter after autocomplete set
            */
            if (e.keyCode != 13) {
                $(this).siblings('input[type=hidden]').each(function () {
                    $(this).val('');
                });
            }
        });
        $(this).autocomplete({
            minLength: 1,
            /* you can set appending of autocomplete menu into some container to set css contextually
            appendTo: '#someElem',*/
            source: sourceFunction,
            search:function (event, ui) {
                //TODO ...spinner init...
            },
            open:function (event, ui) {
                /* you can grab autocomplete menu widget by this to manipulate some recognizing id, etc..
                 * $(this).autocomplete('widget')
                */
                //TODO ..stop spinner ...
                $(this).keydown(function(e){
                    /* this is important for live reference updates while arrow keys changes  */
                    if (e.keyCode == 37 || e.keyCode == 39) {
                       $($(this).data('autocomplete').menu.active).find('a').trigger('click');
                    }
                });
            },
            focus: function(event, ui) {
                /* here we'll map our data object onto both fields */
                $(this).val(ui.item.label);
                $(this).siblings('input[type=hidden]').each(function () {
                    $(this).val(ui.item.key);
                });
            },
            select: function(event, ui) {
                /* here we'll map our data object onto both fields */
                $(this).val(ui.item.label);
                $(this).siblings('input[type=hidden]').each(function () {
                    $(this).val(ui.item.key);
                });
            },
            close: function(event, ui) {
                //TODO ..stop spinner ...
            }
        });
    });
});

It's very nice to have some serverside validation which can convert exact :visible field values into references for quick typing folks of course.

Answer 4

The way I'm doing autocomplete, is to create a container div that contains the input. When I select an element, I add a link containing a span to the container, and I hide the input box.

The link and span are styled so that it looks like a button, with an X, and has a click event handler to remove the entry from the DOM, clear the hidden field, and re-show the input box when clicked. So when an item is selected:

  <div class="container">
    <a href="#"><span>Selected Item</span></a>
    <input id="myautocomplete" type="text" />
    <input type="hidden" name="myvalue" value="1" />
  </div>

And when an item is not selected:

 <div class="container">
    <input id="myautocomplete" name="myautocomplete" type="text" />
    <input id="myvalue" name="myvalue" type="hidden" value="" />
  </div>

This way, you are either forced to select an item, or you enter free form text. On the backend, if the request parameter with key 'myvalue' is empty, then you would rather look at the request parameter with key 'myautocomplete'.