2016-05-24 10 views
0

自動完成テキストボックスを作成しようとしていますが、私のjqueryに問題があります。私はどこに行方不明を修正してください。私は名前を選択するとJqueryオートコンプリートの提案名が空になって表示されます

  1. 名前が候補リスト
  2. に表示されていない、私は、HTMLの隠し入力フィールドで選択した都市のcityidを配置する必要があります。
  3. 提案リストのデザインを変更する方法はありますか。ここで

私がしようとしたコードです。ここで

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Autocomplete - Default functionality</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 

    <script> 
      $(function() { 
      var arr_text = [{"cityid":20,"city":"city1"},{"cityid":21,"city":"city2"},{"cityid":22,"city":"city3"}] 

      $("#txtauto").autocomplete({ 
       source: function (request, response) { 
        var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 

        var matching = $.grep(arr_text, function (value) { 
         var name = value.city; 
         var id = value.cityid; 

         return matcher.test(name) || matcher.test(id); 
        }); 
        response(matching); 
       } 
      }); 



     }); 
    </script> 
</head> 
<body> 

<div class="ui-widget"> 
     <form> 
      <label for="txtauto">Autocomplete</label> 
      <input id="txtauto" /> 
     </form> 
    </div> 
</body> 
</html> 

私のコードHere is the output for above code

答えて

0

こんにちは利用以下のような応答のために出力されます。

response($.map(matching, function(item) { 
         return { 
          label: item.city, 
          value: item.cityid 
         } 
        })); 
関連する問題