Autocomplete not working when JSON comes from URL?

Question

I'm trying to implement a jquery autocomplete control into our HTML page, but I'll be receiving my JSON from a URL resource.

Here's the code. If I set the source to the inline JSON array (source: data) then the autocomplete works well.

If I set the source to the WCF call (source: "http://MyServer:86/Service1.svc/GetStates"), then the list is displayed when I enter any letter, but the filtering/autocomplete doesn't work.

Why isn't the autocomplete working when the JSON comes from a URL?

The json from the URL looks like this: [{"value":"AK","label":"Alaska"},{"value":"AL","label":"Alabama"}], exactly the same format as the inline json.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery UI Autocomplete: Using Label-Value Pairs</title>
    <link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-darkness/jquery-ui.min.css" rel="stylesheet">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
</head>
<body>
    <p>Default Behavior<br>
        <input id="autocomplete1" type="text" placeholder="U.S. state name" name="code"></p>
    <script>
        var data = [
            { value: "AL", label: "Alabama" },
            { value: "AK", label: "Alaska" },
            { value: "AZ", label: "Arizona" },
            { value: "AR", label: "Arkansas" },
            { value: "CA", label: "California" }
        ];
        $(function() {
            $("#autocomplete1").autocomplete({
                source: "http://MyServer:86/Service1.svc/GetStates",
                dataType: 'json'
            });
        });
    </script>
</body>
</html>

Have you looked at the output in dev console? Are any errors occurring or is the source even getting a network request? — forrestmid, Aug 31 '17 at 18:10
There are no javascript errors. The combobox is filled with the correct values. The issue is that it's not doing the autocomplete. — fdkgfosfskjdlsjdlkfsf, Aug 31 '17 at 18:15

forrestmid · Answer 1 · 2017-08-31T20:25:04.587

0

From the jQuery Autocomplete Documentation

When a string is used [as the value of source], the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. It can be on the same host or on a different one (must support CORS). The Autocomplete plugin does not filter the results, instead a query string is added with a term field, which the server-side script should use for filtering the results. For example, if the source option is set to "http://example.com" and the user types foo, a GET request would be made to http://example.com?term=foo. The data itself can be in the same format as the local data described above.

This is basically stating that your URL, that endpoint returning JSON, is going to be called with a term query parameter that will look like http://MyServer:86/Service1.svc/GetStates?term=AL. You then need a server side script to take that term and filter the fixed JSON you're returning to the autocomplete by the term parameter that the autocomplete script sent to your server.

edited Aug 31 '17 at 20:25

answered Aug 31 '17 at 18:21

forrestmid

1,494
17
25

I understand what you mean, but I'm not sure how to implement this in the code. – fdkgfosfskjdlsjdlkfsf Aug 31 '17 at 18:40
You can't use a static JSON document. You have to implement some server side script to read the JSON data and filter it based on the `term` parameter. So, `http://MyServer:86/Service1.svc/GetStates` needs to read the `term` parameter and then filter that JSON document based off of the value of `term`, finally returning JSON that has already been filtered. – forrestmid Aug 31 '17 at 18:42
Processing the parameter is not the issue; how would I add that parameter in the HTML I posted above? How would I include the `term` parameter ? – fdkgfosfskjdlsjdlkfsf Aug 31 '17 at 18:54
Based on the docs it should already be there. Each time you type a character into the autocomplete field it will make a request to the server script with the `term` parameter already attached. If you look at the dev console network request list you should see the requests being made with each keypress, a `term` query parameter attached to each one. – forrestmid Aug 31 '17 at 19:00
So you're saying I don't have to change the code I posted? I just have to change the service so that it reads a parameter? – fdkgfosfskjdlsjdlkfsf Aug 31 '17 at 19:06
Now it doesn't show anything. I would assume it's because the html would remain the same with `source: "http://MyServer:86/Service1.svc/GetStates"` but now the service expects a parameter (ie. `http://MyServer:86/Service1.svc/GetStates/AL` where "AL" would be the parameter `term`. – fdkgfosfskjdlsjdlkfsf Aug 31 '17 at 19:37
No, the url being requested is `http://MyServer:86/Service1.svc/GetStates?term=AL`. You don't have the control to change the request query parameter. – forrestmid Aug 31 '17 at 19:38
You should change your answer by saying that the code posted in the question remains the same. But the service would need to be modified so that that if I invoke it with URL `http://MyServer:86/Service1.svc/GetStates?term=AL`, it will return a JSON stream with everything with text "AL". – fdkgfosfskjdlsjdlkfsf Aug 31 '17 at 20:13
@rbhat I'm glad you figured it out! I've made the clarification in the answer for future people with similar issues. – forrestmid Aug 31 '17 at 20:26

score 0 · Answer 2 · answered Aug 31 '17 at 18:27

0

If you use url string then you would need to implement it in the backend. Instead of that you can use the source as function option, this stack overflow post and answer has an example of how to achieve this.

answered Aug 31 '17 at 18:27

Shyam Babu

1,069
7
14

Autocomplete not working when JSON comes from URL?

2 Answers2