Question

I want to do a very specific stuff with jQuery and autocomplete, and I didn’t find an adequate answer on the web. My first problem is that all the methods I could find on the Web don’t work (parse, formatItem and so on).

What is strange is that the autocomplete works perfectly with the following code, but ignores all the other “customize” methods (parse, formatItem and so on).

/* autocompletion */
$( '#metier' ).autocomplete({
  source: '/json/metiers/categories/mix/',
  minLength: 2,
  select: function(event, ui) {
    /* item look like '(XXXX) yyyy'
       => remove '(XXXX)' then forbid 
          autocomplete() to assign its own value
          via 'return false' :
    */
    var v=ui.item.value;
    $('#metier').val(v.substr(v.indexOf(') ')+1));
    return false;
  }
});

Here’s what I put in my <header>: I’m using the latest versions of everything so I don’t know what’s wrong with it:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" type="text/css" media="screen" />

---

Here’s what I’ve done and it works:

• add autocomplete to an input field
• when the selection is made, remove the (XXX) at the beginning of the selection and fill the input field with what’s left

---

Here’s what I’m trying to do:

• add autocomplete to an input field
• when the AJAX returns, stock the resulting array (which is JSON) in a global variable (to be able to retrieve a corresponding field (url actually) later on
• for each label that will be shown in the list, create a custom display (there’s always a (XXX) at the beginning, i’d like it to be colored), and create a custom id (depending on the AJAX return).
• when the selection is made, remove the (XXX) at the beginning of the selection and fill the input field with what’s left, extract the id number from the id of the selection, and stock the corresponding field url found in the global array in a global variable for later use.

---

I’m using the jQuery autocomplete component, and the AJAX call returns something like:

[
    {
        "id":"229",
        "value":"(Category) General category of that stuff",
        "url":"//"
    },
    {
        "id":"240",
        "value":"(Category) General category of that stuff",
        "url":"/toto/detail/tata"
    },
    {
        "id":"3655",
        "value":"(Detail) Very detailed stuff",
        "url":"/toto/detail/tata"
    }
]

I’ve already looked at:

• stackoverflow what-does-formatresult-and-formatitem-options-do-in-jquery-autocomplete
• blog.schuager.com jquery-autocomplete-json-apsnet-mvc
• stackoverflow json-with-autocomplete
• jqueryui autocomplete custom-data / jqueryui autocomplete custom-data

But nothing could help me…

Answer 1

There is a tutorial on how to do custom display on the jQuery UI site:

• http://jqueryui.com/demos/autocomplete/#custom-data

To do custom display of the items in the drop-down, it chains a .data("autocomplete") call after the .autocomplete call, and adds a _renderItem function to the data that is retrieved.

Here’s some code to do the auto-coloring of the items in parens:

http://jsfiddle.net/VnUv8/

.data("autocomplete")._renderItem = function(ul, item) {
    var v = item.value;
    return $("<li></li>")
        .data("item.autocomplete", item)
        .append(
            "<a>"
                + "<span class='hilightItem'>"
                    + v.substr(0, v.indexOf(') ') + 1)
                + "</span>"
                + " " + v.substr(v.indexOf(') ') + 2)
            + "</a>"
        )
        .appendTo(ul);
};