jQueryUI Autocomplete: use STATIC page as source
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I need to use a static page as the source for my jQueryUI autocomplete text box. I cannot get it to work, probably because I'm misunderstanding some fundamental stuff about how the data has to be returned.

This simple page based on the jQueryUI doc works fine:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>autocomplete demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<label for="autocomplete">Type the letter 'a'</label>
<input id="autocomplete">
<script>

var foo = ["aaa", "aab", "aac"];

$("#autocomplete").autocomplete({
    source: foo
});

</script>
</body>
</html>

Now, I want to to change the line that says

source: foo

to

source: "http://localhost/foo.htm"

and make it work the same way. The problem is that I cannot figure out what to put as the contents of file foo.htm. I was under the impression that I should be able to make a file that iterally has the contents

['aaa', 'aab', 'aac']

and that should work. But it doesn't. I have tried many, many variations on "['aaa', 'aab', 'aac']" (i.e., various combinations of quotes, parentheses, brackets) with no luck. By "no luck", I mean that the autocomplete does nothing. No error, but does nothing.

Reading the doc, it appears that I may need the response to be JSONP formatted. But other examples I've examined seem to indicate that in the simple case I can just return a Javascript array.

Is it possible to do this with a static page without resorting to callbacks, mapping, etc.? Is my problem perhaps related to the content type that gets returned (or lack thereof)? I am testing in an IIS / ASP.Net 4.0 environment.

Again, bear in mind that I have a requirement of using a STATIC page that must reside on the server as a simple file. I've seen TONS of examples on the web with other sources (PHP page on server, etc.), but I must have static page. The successful respondent will provide the contents of the file foo.htm as described above and will not use any additional mapping or ajax functions on the client side, i.e., the autocomplete setup will look like

$("#autocomplete").autocomplete({
    source: "http://localhost/foo.htm"
});

Actually, the server side requirements are not quite as strict as described above. For example, if necessary, it would be allowed to change the response headers to indicate JSON data, or whatever, although I'm not clear on how to do that.

Are main page and foo.htm on the same server(localhost)? I've tried it and it works. If they are on different server(domain) , you cannot make cross domain request, so that won't work.
– ocanal almost 8 years ago
@ocanal: Yes, all the pages are on the same server. If specifying source = "http://localhost/foo.htm" works for you, then that implies there is perhaps something different in your IIS configuration. Like maybe in my configuration the raw data from foo.htm is not getting interprested properly? It definitely doesn't work for me. No error, but just nothing happens as far as autocomplete.
– rob3c almost 8 years ago
I don't think that it is about server, here is a demo on dropbox, https://dl.dropbox.com/u/39457223/bountify/1/bar.html and https://dl.dropbox.com/u/39457223/bountify/1/foo.htm
– ocanal almost 8 years ago
@ocanal: Your dropbox example was helpful. I created my own text in my dropbox account and it worked. So that confused me. Did the same thing on my IIS and it did not work. After various trial and error I finally discovered that the problem boiled down to ' vs". Notice my original example. See how the sample file contents use single quotes? That doesn't work. Switching to double quotes made it work. I was under the impression that in JS there is no difference.
– rob3c almost 8 years ago
awarded to skram

Crowdsource coding tasks.

Sign up About

1 Solution

Tip!
✓
Winning solution

All you were missing was some getJSON action. Full code below.

HTML File

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>autocomplete demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<label for="autocomplete">Type the letter 'z'</label>
<input id="autocomplete">
<script>

jQuery.getJSON('data.json', function(data) {
  $("#autocomplete").autocomplete({
      source: data
  });
});

</script>
</body>
</html>

In the same folder as the HTML file, put a data.json file with the contents: ["zaa","zbb","zcc"]

Demo here: http://dl.dropbox.com/u/225555/index.html
– skram almost 8 years ago
I'm inclined to accept this solution as it indeed works. However, it doesn't meet the requirement of original post: and will not use any additional mapping or ajax functions on the client side As I understand, getJSON is merely a wrapper around the jQuery ajax function. Let me word it a different way, and relax any restrictions on the server side (other than must be ASP.Net). The client side page must not change in any way from what I originally posted, other than the line for source changes to "http://localhost/foo.htm". How can we change the server side delivery of foo.htm?
– rob3c almost 8 years ago
Can you just put the array of values in the main HTML file instead of them being in foo.htm?
– skram almost 8 years ago
No. As pointed out in my original post, it works perfectly fine when the array is in the same HTML file. The whole thing is that I need it to work with the data coming from an external file. But at this point I no longer care that it be an actual file in the file system. If I can just get an example of some server code that sends when is needed to make the client page work with the source set at described, with no additional wrappers on the client side, that would be fine.
– rob3c almost 8 years ago
What I meant was use ASP.net (which I dont know - at all, sorry) to insert your JS array of values in the HTML file with the jQuery code. Good luck!
– skram almost 8 years ago
See my comment on the original post. As best I can tell, it all boiled down to single quote vs. double quote. However, your answer was still very helpful. It's all working well now.
– rob3c almost 8 years ago
This works in chrome, but not in firefox
– elwood almost 8 years ago
View Timeline