JQuery UI Autocomplete - Display and Search Different Data

Question

I'm trying to make what should be a simple change to the way the jquery ui autocomplete operates.

Currently I am providing the source property with objects of the following format:

{label: "Display This", value: "Search This", other: "This is some other random data"}

As my example and title suggest, I would like to display different data in the drop down than what the user types in to search on. How is this possible? I'd rather not use Joe Schmoe's plugin.

Thanks!

use plugin, but create different queries, you can say where title not like '%@Query%" — Senad Meškin
– Senad Meškin, Commented Oct 24, 2011 at 22:12

Andrew Whitaker · Accepted Answer · 2011-10-24 22:46:30Z

2

Here's one way you could do this (assumes a local data source):

var source = [{label: "Display This", value: "Search This", other: "This is some other random data"}];

$("#auto").autocomplete({
    source: function(request, response) {
        var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
        response($.grep(source, function(value) {
            return matcher.test(value.value);
        }));
    }
});

Example: http://jsfiddle.net/dHFk8/ (search "Search")

If you're using a remote data source, then you can perform whatever search logic you'd like in the server-side code.

edited Oct 24, 2011 at 22:46

answered Oct 24, 2011 at 22:38

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SamDasti Over a year ago

How to display multiple items in label

success: function( data ) {      response( $.map( data, function( item ) {          var code = item.split("|");              return {                  label: code[0] + "-" + code[1] + "-" + code[2],                  value: code[autoTypeNo],                  data : item              }          }));      }

// Is this workable? More detail is here stackoverflow.com/questions/50881027/… .

fehays · Accepted Answer · 2011-10-24 22:38:31Z

0

You can implement an ajax call in your "source" method and in the success method of that call, you can create a map in the response(). And you can set the "label" and "value" properties:

This may work (untested):

// sample data returned from ajax call
var sampleData = [
    { label: 'test label', value: 'test value' },
    { label: 'test label1', value: 'test value1' },
    { label: 'test label2', value: 'test value2' },
    { label: 'test label3', value: 'test value3' }
];
response($.map(sampleData, function (item) {
    return {
        label: item.label,
        value: item.value
    }
}));

answered Oct 24, 2011 at 22:38

fehays

3,1671 gold badge26 silver badges44 bronze badges

Collectives™ on Stack Overflow

JQuery UI Autocomplete - Display and Search Different Data

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related