basic jquery autocomplete with remote data source --how?_问答_开发者

What is the proper way to get autocomplete working with remote data? I read the document at

http://docs.jquery.com/Plugins/Autocomplete

and ran the example code. The example worked just fine for local data stored in a JS array, but when I used a remote URL, it doesn't work. I see the autocomplete HTTP request being generated, and I can see my local web server responding with the correct data. But the autocomplete info does not pop up.

Here is my .html code, it is only different by 2 lines from the example in th开发者_高级运维e jquery documentation:

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
  <script>
  $(document).ready(function(){
     url = "http://localhost:8000/autocomplete/"
     $("#example").autocomplete(url);
  });
  </script>

   </head>
   <body>
     API Reference: <input id="example" /> (try "C" or "E")
   </body>
</html>

Is there anything else needed in the .htm file? Should I change the data format returned by the server? Currently when I type "fr" into the text box, my server returns this:

["fractal","FRACTAL","fractalzebra","frad","Fraet",]

I am just trying to display a simple list of strings, I don't need to include any additional data in the server response unless it turns out to be required by jquery.

Thanks in advance, this problem has really been stumping me.

-Travis

Make sure you're also not running into the Same Origin Policy issue which, prior to jQuery 1.5, required all different origin domain ajax calls to be jsonp, and now are implementable with crossDomain:true. As far as the Autocomplete plugin goes, I'm not aware how it fetches the data so this might not be applicable, but what you said about the local version working and the remote data not made me think of this immediately.

From what I see, the server should return a valid JSON string and the last entry is invalid because it does not contain quotes. I think you should do a simple test by just returning a simple set of data, not something generated with your backend code.

["fractal","FRACTAL","fractalzebra","frad","Fraet",]

Should be

["fractal","FRACTAL","fractalzebra","frad","Fraet"]

Example of my testing idea would been to just do a test with a html file containing ["test1,"test2"]. Call this file in your URL parameter and see. If it works than it was your generated JSON string that contain an error.

Ok so I set it up working on my local. Try the following:

test.php

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
  <script>
  $(document).ready(function(){
     url = "http://localhost/test-data.php"
     $("#example").autocomplete({
         source: url
     });
  });
  </script>
</head>
<body>
 API Reference: <input id="example" />
</body>
</html>

test-data.php

["test", "tooth", "no way", "blah"]

The differences here are the format of the options you're giving the autocomplete function. In addition, just to make sure you're getting them correctly, I'm loading the two libraries from google. Note that you'll also need the jquery ui css files. This should work for testing though.