2016-09-08 16 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を参照してください。

関連する問題