个人中心
gpt4 book ai didi

jquery - Bootstrap 3 和 Typeahead 的简单示例

转载 作者：行者123 更新时间：2023-12-01 04:09:21 24 4
gpt4 key购买 nike

我有一个适用于 typeahead 和 jQuery 的简单实现，但是当我在控件中输入某些内容时，我看到 [object Object] 而不是实际值。

如何解决此问题以便看到 stateName？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="examples.css">
  <title>Example of Twitter Typeahead</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
  <script  type="text/javascript" src="typeahead.bundle.js"></script>
  <script type="text/javascript">

    $(document).ready(function() {
        console.log("Ready!"); 

        $('#search').typeahead({
            hint: true,
            highlight: true,
            minLength: 1
        },
        {
            name: 'states',
            displayKey: 'value',
            source: function (query, process) {
            states = [];
            map = {};

            var data = [
                {"stateCode": "CA", "stateName": "California"},
                {"stateCode": "AZ", "stateName": "Arizona"},
                {"stateCode": "NY", "stateName": "New York"},
                {"stateCode": "NV", "stateName": "Nevada"},
                {"stateCode": "OH", "stateName": "Ohio"}
            ];

            $.each(data, function (i, state) {
                map[state.stateName] = state;
                states.push(state.stateName);
            });

            process(states);
        },
        matcher: function (item) {
            if (item.toLowerCase().indexOf(this.query.trim().toLowerCase()) != -1) {
                return true;
            }
        },
        sorter: function (items) {
            return items.sort();
        },
        highlighter: function (item) {
            var regex = new RegExp( '(' + this.query + ')', 'gi' );
            return item.replace( regex, "<strong>$1</strong>" );
        },
        updater: function (item) {
            selectedState = map[item].stateCode;
            return item;
        }
        });
    });
  </script>
  </head>
  <body>
    <div>
      <input id="search" type="text" placeholder="States of USA">
    </div>
  </body>
</html>

这是当我在控件中输入要搜索的值时屏幕的样子。

enter image description here

最佳答案

我在 typeahead 文档中的任何地方都没有找到对 matcher 参数的引用。

根据相同的文档，source 函数应该:

compute the suggestion set (i.e. an array of JavaScript objects) for query and then invoke cb with said set

您的代码正在尝试过滤作为参数传递给 typeahead 的匹配器函数中的数据，并且您的源函数正在返回所有元素。匹配器函数甚至从未被调用。我删除了它并将其创建为独立函数。我在 source 函数内部调用它，以便 source 只返回匹配的结果。这修复了过滤。

Typeahead 仍会显示 undefined 而不是状态名称，这是因为它期望从源函数接收的数据是对象数组，并且它显示每个对象的 值 字段。我也改变了。

highlighter 和 sorter 参数也没什么用。

这是改变后的JS:

 function  matcher (item, query) {
        if (item.toLowerCase().indexOf(query.trim().toLowerCase()) != -1) {
            return true;
        }
    }

$(document).ready(function() {
    console.log("Ready!"); 


    $('#search').typeahead({
        hint: true,
        highlight: true,
        minLength: 1
    },
    {
        name: 'states',
        displayKey: 'value',
        source: function (query, process) {
        states = [];
        map = {};

        var data = [
            {"stateCode": "CA", "stateName": "California"},
            {"stateCode": "AZ", "stateName": "Arizona"},
            {"stateCode": "NY", "stateName": "New York"},
            {"stateCode": "NV", "stateName": "Nevada"},
            {"stateCode": "OH", "stateName": "Ohio"}
        ];

        $.each(data, function (i, state) {
            map[state.stateName] = state;
    if(matcher(state.stateName, query)) {
        states.push({value: state.stateName});
    }
        });

        process(states);
    },

    });
});

或者检查jsbin:

http://jsbin.com/kayev/1

关于jquery - Bootstrap 3 和 Typeahead 的简单示例，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22642669/

24 4 0
文章推荐： json - 使用 Ant 解析和编写 JSON
文章推荐： Python列表打印
文章推荐： github-api - 使用 github v3 API 删除标签
文章推荐： python - 如何验证 django 设置是否正确应用？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com