Question

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

我知道sugest工作正常，但我想通过按提交按钮或输入来限制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())
    }
  }
);

Answer 1

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

1）typeahead本身忽略事件键码13（Enter按钮），因此我们需要将一个监听器附加到输入字段，以便在每个按键上使用代码13来输入＆＃39; source＆＃39;方法将被触发。为了触发预先搜索（如建议的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）现在实际的来源＆＃39;每按一次Enter按钮就会调用该方法。好的，但我们希望这种方法忽略其他按钮，对吧？对window.event的调用将显示导致调用“来源”的事件。我只会调整您的来源＆＃39;方法在这里：

...
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，＆＃39;来源＆＃39;方法有一个签名（query，syncResults，asyncResults）所以我不确定你的例子是否带有

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

将正常运作。在我的项目中，我使用了

的内容

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

..然后忽略foo参数。调用asyncResults（在＆＃39; source＆＃39;中将其作为第三个参数）实际上对我有效。

show提示onsubmit按钮或仅按远程twitter typeahead按Enter键

1 个答案: