Search jQuery

jQuery Forum

Jquery UI AutoComplete Additional Search Terms

in Using jQuery UI • 6 months ago

Hey everyone,

My question is about how autocomplete searches and where it is pulling its data from. I have a local database that has all my information and I have got the autocomplete working almost perfect except I cant figure out how to add additional hidden search terms. For example

typing into the input: Hood ornament => Hood Ornament

but I also want to search on its "search term" field from the database

so typing into input: Chrome => Hood Ornament

Is there anyway this can be done??

Replies(2)

mike_laird

Re: Jquery UI AutoComplete Additional Search Terms

6 months ago

Yes, this can be done. I'm part way through a similar project and have simple test cases working - sometimes.

You don't mention your JS skill level. IMO, this is not a beginner project. I am a JS novice, but have worked a lot with Autocomplete projects for a couple years. The similar project I'm working is do-able, but difficult and slow for me. I do a lot of research and run down a fair number of dead ends.

The Autocomplete source: option takes a function. That function can be as complex as you want. In a gross over-simplification, you want to build 2 methods for getting data, compare and delete overlap, and then merge the 2 remaining arrays.

If you have not built a remote data Autocomplete, you may find the information that I posted a while ago at this link useful. If you do the project, start small and simple, then add complexity.

https://forum.jquery.com/topic/autocomplete-how-to-use-mysql-data

bakerj417

Re: Jquery UI AutoComplete Additional Search Terms

6 months ago

Thanks for replying to me it kicked my brain in the right direction to come up with this solution.

I think I found a solution to use the user's input to search on 2 fields and put back the result if it is contained in either. So I know this looks ugly but it is working perfect so thought I would share:

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

and the Parts object is set up like this:

Parts.push({
            info: {
                AreaDescription: g_data.rows.item(i).AreaDescription_001,
                PartArea: g_data.rows.item(i).PartArea,
                PartCode_001:g_data.rows.item(i).PartCode_001,
                LongDescription:g_data.rows.item(i).LongDescription
            },
            label: g_data.rows.item(i).LongDescription,
            SearchTerms:g_data.rows.item(i).SearchTerms
        });

This solution allows me to type in "chrome" and the user sees in autocomplete "Hood Ornament"

Top Reply

Response title

Attachments

jQuery Forum

Jquery UI AutoComplete Additional Search Terms

Replies(2)

Re: Jquery UI AutoComplete Additional Search Terms

Re: Jquery UI AutoComplete Additional Search Terms

Statistics

Tags

Actions

Related Posts