jQuery UI Autocomplete - Building custom source

Question

I have json array of the form:

[{"label":<some-label>,"spellings":[<list of spellings>]}, ...]

I need to parse the above array using jquery ui autocomplete. However, there are few constraints:

The autocomplete suggestions should involve matches from "spellings" but should suggest corresponding "label" only. e.g. if there are n "spellings" for a "label" then the autocomplete should show only that particular "label" for n "spellings".
On selecting from the suggestions provided, the corresponding "label" should only be reflected in the text input box.

How should I proceed with it? Any pointers?

And, how to iterate over list of "spellings" for a corresponding "label"?

This is what I'm trying to do, but giving garbled output.

var labels = []
var values = [] 
$.getJSON($url, function(data) { 
  $.each(data, function(key, val) { 
    for (var v in val.value)
      values.push(val.value[v])
    labels.push(val.label)
}); 
$("#text1").autocomplete({ 
  minLength: 2, 
  source: values, 
  focus: function(event, ui) { 
    $("#text1").val(ui.item.label); 
    return false; 
  }, 
  select: function(event, ui) { 
    $("#text1").val(ui.item.label); 
    return false; 
  } 
});
});

Andrew Whitaker · Accepted Answer · 2012-08-08 16:26:21Z

I would build up a single source array of items, one for each spelling, where the label property is the label for each spelling and the value property is the spelling itself. This will enable you to quickly filter down results without having to iterate over each object's spelling array and check for matches which could take awhile.

Then, inside a function you define for source, you can do your own filtering logic, only allowing one instance of each "label" in the suggestions list.

Something like this should work (note that the autocomplete is initialized inside of the $.getJSON callback. This is necessary to make sure the source data is loaded before the widget is initialized):

$.getJSON($url, function(data) {
    $.each(data, function (i, el) {
        source.push({ label: el.label, value: el.label });

        $.each(el.spellings, function (j, spelling) {
            source.push({ label: el.label, value: spelling });
        });
    });

    /* initialize the autocomplete widget: */
    $("input").autocomplete({
        source: function (request, response) {
            var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i")
                , results = [];

            /* Make sure each entry is only in the suggestions list once: */
            $.each(source, function (i, value) {
                if (matcher.test(value.value) && $.inArray(value.label, results) < 0) {
                    results.push(value.label);
                }
            });
            response(results);
        }
    });
});

Example: http://jsfiddle.net/MaMZt/

Collectives™ on Stack Overflow

jQuery UI Autocomplete - Building custom source

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related