Jquery自动填充建议名称显示为空

时间:2016-05-24 17:13:25

标签: jquery arrays json autocomplete jquery-autocomplete

我试图创建自动填充文本框,我的jquery有问题。请更正我失踪的地方。

  1. 名称未显示在建议列表中
  2. 当我选择名称时,我需要在html隐藏输入字段中放置所选城市的cityid。
  3. 有没有办法改变建议清单设计。
  4. 以下是我尝试的代码:

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

    的输出

1 个答案:

答案 0 :(得分:0)

嗨使用如下的响应。

response( $.map( matching, function( item ) {
                        return {
                            label: item.city,
                            value: item.cityid
                        }
                    }));