jQuery Autocomplete search from URL query string

Question

I have a currently functioning input that correctly searches through a JSON array and displays content based on whats selected. However, I am trying to add functionality to the search tool that will allow it to accept a query string in the URL.

ie: "site.com?s=test" would fill input and search for "test"

I am able to correctly decode the URI, and pass the variable to the input. However, it does not 'search' and actually requires deleting a character and retyping it in for it to accept the search term.

This is the jQuery autocomplete I am using: https://github.com/devbridge/jQuery-Autocomplete

I will also note, I can paste the search term into the input and it will search, but if it grabs the value from the URL it seems to ignore the search function.

            var urlParams;
            (window.onpopstate = function () {
                var match,
                    pl     = /\+/g,  // Regex for replacing addition symbol with a space
                    search = /([^&=]+)=?([^&]*)/g,
                    decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
                    query  = window.location.search.substring(1);

                urlParams = {};
                while (match = search.exec(query))
                   urlParams[decode(match[1])] = decode(match[2]);
            })();

            $("#input").val(urlParams["s"]);

            $("#input").autocomplete({
                lookup: names,
                onSelect: function (suggestion) {
                    // code here for output
                }
            });

Not sure what I am missing.

jfyi - question tag keeps defaulting to jquery-ui-autocomplete instead of jquery-autocomplete. Sorry for the confusion.

Since I cannot find anything valuable to answer your question in the source code of this plug-in, I would sugget you to use JQuery UI's autocomplete widget, and feed the source from an AJAX call when a `search` even is triggered (just make sure the `search` function waits for the source to be provided by your ajax call.) — Jeff Noel, May 25 '17 at 19:00
@JeffNoel this really isn't a proper solution, this requires a complete change to the tool that is already working. — nightowl, May 25 '17 at 19:05

Jeff Noel · Answer 1 · 2017-05-25T19:02:24.833

I didn't find anything that could help you in the plug-in's source code, but here's an alternative solution, using jQuery UI's autocomplete widget.

You can always trigger the .search() method from the jQuery UI autocomplete widget.

Here is what it does:

Triggers a search event and invokes the data source if the event is not canceled. Can be used by a selectbox-like button to open the suggestions when clicked. When invoked with no parameters, the current input's value is used.

All you have to do is to make sure the source is fed fresh information from your remote data source (from an AJAX call). You can find how to do this in the following answer.

score 0 · Accepted Answer · answered May 30 '17 at 17:51

I was able to successfully pass a URL value to the input and have it search by putting the following code in a setTimeout function (1000 worked for me):

        $('#input').autocomplete('onValueChange');

The issue seemed to arise when the value was getting passed before the autocomplete had a chance to initiate.

jQuery Autocomplete search from URL query string

2 Answers2