show 建议 onsubmit 按钮或仅在远程 twitter typeahead 的情况下按 enter 键答案

【问题标题】：show suggests onsubmit button or press enter key only with remote twitter typeaheadshow 建议 onsubmit 按钮或仅在远程 twitter typeahead 的情况下按 enter 键
【发布时间】：2023-03-07 04:22:01
【问题描述】：

我正在尝试使用 Twitter Bootstrap typeahead (v2.3.2) 和 jQuery v1.8.3 从拥有 20k 用户的大型数据库表中搜索一个订阅用户，并使用多个连接和联合两个或一个以上数据库。

我知道 sugests 可以正常工作，但我只想通过按下提交按钮或回车来限制对服务器的 ajax 请求。

我的问题是如何仅在按下提交按钮或 Enter 时启动建议和搜索请求。

我的代码：

$('input[name="searchSubs"]').typeahead({
    minLength: 2,
    highlight: true,
    hint: true,
    source: function (query, process) {
        var postData = {'query': query};
        $.extend( postData, {'search_field': '2'} );

        return $.post('search/ajax_search/', postData,
            function (response) {
                var data = new Array();
                $.each(response, function(i, item) {
                    data.push(item.subs_id +'_'+ item.firstname + ' ' + item.lastname);
                });
                return process(data);
            },
            'JSON'
        );
      }
    , highlighter: function(item) {
          item = item.replace(new RegExp('(' + this.query + ')', 'ig'), function ($1, match) {
            return '<strong>' + match + '</strong>'
          })
          var parts = item.split('_');
          var subs_id = parts.shift();
          var itm = ''
              + "<div class='typeahead_wrapper'>"
              + "<div class='typeahead_primary'>" + parts.join('_') + "</div>"
              + "<div class='typeahead_secondary'>ID: " + subs_id + "</div>"
              + "</div>";
        return itm;
      }
    , updater: function(item) {
        var parts = item.split('_');
        var subs_id = parts.shift();
        window.location.href = 'home/?subs_id='+subs_id;
        return parts.join('_');
    }
    , matcher: function (item) {
        return ~item.toLowerCase().indexOf(this.query.toLowerCase())
    }
  }
);

【问题讨论】：

您使用的是哪个版本的预输入？
我使用 bootstrap-typeahead.js v2.3.2
问题没有解决，我在等待任何想法

标签： jquery twitter-bootstrap twitter bootstrap-typeahead

【解决方案1】：

我需要获取用户输入（地址行），查询谷歌地理编码 API（获取匹配结果），并使用 typehead 部署结果。所描述的解决方案对我有用：

1) 预输入本身会忽略事件键码 13（Enter 按钮），因此我们需要将侦听器附加到输入字段，以便在每次使用代码 13 的按键时触发预输入“源”方法。为了触发预输入搜索（建议in this answer），我们需要清理输入字段的内容并重新填充。

$('input[name="searchSubs"]').on('keypress', function(e) {
    if (e.which !== 13) return;

    var $this = $(this),
        val = $this.val();

    $this.typeahead('val', '').focus().typeahead('val', val).focus();
});

2) 现在，每次按下 Enter 按钮都会调用实际的“源”方法。好的，但是我们希望这个方法忽略其他按钮，对吧？对 window.event 的调用将显示导致调用“源”的事件。我只会在这里调整你的“来源”方法：

...
source: function (query, process) {
    // get the current event
    var e = window.event;

    // if the query (basically, input field) is empty 
    // .. or its not the Enter button has caused this call
    if (!query.toString().length || e.which !== 13)
        return;

    var postData = {'query': query};
    $.extend( postData, {'search_field': '2'} );
    ...
}
...

然而，根据typeahead documentation，'source' 方法的签名为 (query, syncResults, asyncResults) 所以我不确定您的示例是否与

...
source: function (query, process)
...

将正常工作。在我的项目中，我使用了类似

的东西

...
source: function (query, foo, process)
...

.. 并且忽略 foo 参数。调用 asyncResults（将其作为 'source' 中的第三个参数）实际上对我有用。

【讨论】：