2016-09-08 2 views
0

Я новичок в jquery. Я пытаюсь объединить функцию автозаполнения для текстового поля. До сих пор я могу взять вход, сделать ajax-вызов, получить ответ json и построить массив с данными. Однако я не могу представить эти данные в автозаполнении. Вот мой код javascript. Я не уверен, что это проблема css или проблема с javascript. Я добавил jquery-ui.css. Просьба сообщить.автозаполнение jquery с ajax неспособным заполнить

$(document).ready(function() { 

     function SearchText() { 
      $("#text-drug").autocomplete({ 
       minLength: 3, 
       source: function(request, response) { 
        $.ajax({ 
         type: "GET", 
         url: "url", 
         beforeSend: function(xhr) { 
          xhr.overrideMimeType("text/plain; charset=x-user-defined"); 
         }, 
         success: function (data) { 
          if (data != null) { 
          var parsedJson = $.parseJSON(data); 
          alert(parsedJson); 
          var arr = []; 
          for (var i=0;i<parsedJson.length;++i) 
           { 
            arr.push(parsedJson[i].name); 
           } 
           alert(arr); 
          response(arr);        } 
         }, 
         error: function(result) { 
          alert("Error"); 
         } 
        }); 
       } 

      }); 
     } 

});

+0

Этот код отлично подходит для меня. Может быть, вы проверяете его, не набрав 3 символа? –

ответ

1

Вот аналогичный код, который я тестировал, и он отлично работает. Посмотрите, поможет ли вам найти проблему с вашим кодом.

1. index.html

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>jQuery UI Autocomplete functionality</title> 
     <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> 
     <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
     <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
     <!-- Javascript --> 
     <script> 
     $(function() { 
      $("#txtAutocomplete").autocomplete({ 
       minLength: 3, 
       source: function(request, response) { 
        $.ajax({ 
         type: "GET", 
         url: "data.php", 
         beforeSend: function(xhr) { 
          xhr.overrideMimeType("text/plain; charset=x-user-defined"); 
         }, 
         success: function (data) { 
          if (data != null) { 
          var parsedJson = $.parseJSON(data); 
          //alert(parsedJson); 
          var arr = []; 
          for (var i=0;i<parsedJson.length;++i) 
           { 
            arr.push(parsedJson[i].name); 
           } 
           //alert(arr); 
          response(arr);        } 
         }, 
         error: function(result) { 
          alert("Error"); 
         } 
        }); 
       } 
      }); 
     }); 
     </script> 
    </head> 
    <body> 
     <!-- HTML --> 
     <div class="ui-widget"> 
     <input id="txtAutocomplete"> 
     </div> 
    </body> 
</html> 

2. data.php

<?php 
    echo "[{\"name\":\"programmer\"},{\"name\":\"stackoverflow\"}]"; 
?> 

Выходной

Output

Вам также может потребоваться отфильтровать данные с использованием свойства term в объекте запроса. Пожалуйста, обратитесь к JQuery UI Autocomplete Documentation за дополнительной информацией.