базовое автозаполнение jquery с удаленным источником данных - как? - PullRequest
Новая
       24

базовое автозаполнение jquery с удаленным источником данных - как?

1 голос
/ 02 июля 2011

Как правильно настроить автозаполнение при работе с удаленными данными?Я прочитал документ по номеру

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

и запустил пример кода.Пример отлично работал для локальных данных, хранящихся в массиве JS, но когда я использовал удаленный URL, он не работал.Я вижу генерируемый запрос автозаполнения HTTP и вижу, как мой локальный веб-сервер отвечает правильными данными.Но информация автозаполнения не появляется.

Вот мой код .html, он отличается только на 2 строки от примера в документации jquery: 

<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>

Есть ли что-нибудь ещенужен в файле .htm?Должен ли я изменить формат данных, возвращаемых сервером?В настоящее время, когда я набираю «fr» в текстовое поле, мой сервер возвращает следующее: 

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

Я просто пытаюсь отобразить простой список строк, мне не нужно включать какие-либо дополнительные данные вответ сервера, если он не требуется для jquery.

Заранее спасибо, эта проблема действительно ставит меня в тупик.

-Travis

Ответы [ 3 ]

2 голосов
/ 02 июля 2011

Убедитесь, что вы также не сталкиваетесь с проблемой Same Origin Policy , которая до jQuery 1.5 требовала, чтобы все различные вызовы ajax домена происхождения были jsonp, и теперь их можно реализовать с помощью crossDomain: true. Что касается плагина Autocomplete, я не знаю, как он выбирает данные, так что это может быть неприменимо, но то, что вы сказали о работе локальной версии и удаленных данных, не заставило меня сразу подумать об этом.

1 голос
/ 04 июля 2011

Хорошо, поэтому я настроил его на свой локальный.Попробуйте следующее:

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"]

Различия здесь заключаются в формате параметров, которые вы предоставляетефункция автозаполнения.Кроме того, просто чтобы убедиться, что вы получаете их правильно, я загружаю две библиотеки из Google.Обратите внимание, что вам также понадобятся файлы jquery ui css.Это должно работать для тестирования, хотя.

1 голос
/ 02 июля 2011

Из того, что я вижу, сервер должен вернуть допустимую строку JSON, а последняя запись недействительна, поскольку она не содержит кавычек. Я думаю, что вы должны сделать простой тест, просто вернув простой набор данных, а не что-то сгенерированное с помощью вашего внутреннего кода. 

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

Должно быть 

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

Примером моей идеи тестирования было бы просто выполнить тест с html-файлом, содержащим ["test1," test2 "]. Вызовите этот файл в параметре URL и посмотрите. Если это работает, чем это было сгенерированной строкой JSON, содержат ошибку.

...