【问题标题】:Jquery Autocomplete suggestion names displaying as emptyJquery 自动完成建议名称显示为空
【发布时间】:2016-09-22 01:01:27
【问题描述】:

我正在尝试创建自动完成文本框,我的 jquery 有问题。请纠正我丢失的地方。

  1. 名称未显示在建议列表中
  2. 当我选择名称时,我需要将所选城市的 cityid 放在 html 隐藏输入字段中。
  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>

这是我的代码的输出

【问题讨论】:

    标签: jquery arrays json autocomplete jquery-autocomplete


    【解决方案1】:

    您好,请使用如下响应。

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-04-27
      • 1970-01-01
      • 2011-06-08
      • 2018-09-16
      • 1970-01-01
      相关资源
      最近更新 更多