Bootstrap Typeahead单击事件 [英] Bootstrap Typeahead click event

问题描述

我正在使用bootstrap-typeahead.js v2.0.0进行自动完成搜索.我有一个单击事件来查看结果，但它只能像10次中的1次一样工作，在其他情况下，我会收到一个错误:未捕获的SyntaxError:意外的令牌u".

I'm using bootstrap-typeahead.js v2.0.0 for an autocomplete search. I have a click event to view the result but it only works like 1 of 10 times, in the other case I get an error: "Uncaught SyntaxError: Unexpected token u".

我环顾四周，发现了以下内容: https://github.com/twitter/bootstrap /issues/4018 ，我在那里尝试了解决方案，但似乎无济于事.当我使用回车键时，它可以完美工作，因此它必须与单击事件有关.还有其他人遇到同样的问题吗? 代码:

I've looked around and found this: https://github.com/twitter/bootstrap/issues/4018 and I tried the solutions there but nothing seems to work. It works perfect when I use the enter-key so it has to be something concerning the click-event. Anyone else got the same problem? Code:

$('#search').typeahead({

        source: function (typeahead, query) {
                $.ajax({
                    type: "GET",
                    url: "search/" + query,
                    success: function (data) {
                        searchResult = data;
                        return typeahead.process(data);
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        console.log(thrownError);
                    }
                }); 
        }
        },
        onselect: function (obj) {
            window.location.href = "view/" + obj.id;
        },
        items: 8,
        minLength: 1,
        highlighter: function (item) {
        var artist = _.find(searchResult, function (a) {
            return item === a.value;
        });
        return ('<li>' + artist.value + ' (' + artist.dbirth + '-' + artist.ddeath + ')<li>');
        }
    });

推荐答案

好的，我自己解决了.这是您要做的:

Okay I solved it myself. This is what you have to do:

打开bootstrap-typeahead.js并在第203行上找到listen方法并进行如下修改:

Open bootstrap-typeahead.js and find the listen method on row 203 and modify like this:

    listen: function () {
    this.$element
    .on('blur',     $.proxy(this.blur, this))
    .on('keypress', $.proxy(this.keypress, this))
    .on('keyup',    $.proxy(this.keyup, this))

    // if ($.browser.webkit || $.browser.msie) {
    this.$element.on('keydown', $.proxy(this.keypress, this))
    // }

    this.$menu
    .on('click', $.proxy(this.click, this))
    .on('mouseenter', 'li', $.proxy(this.mouseenter, this))
    .on('mouseleave', 'li', $.proxy(this.mouseleave, this))
    }

这里唯一的区别是我在'mouseleave'上添加了一个侦听器.

The only difference here is that I added a listener on 'mouseleave'.

转到第278行的mouseenter方法并将其更改为:

Go to the mouseenter method on row 278 and change it to this:

mouseenter: function (e) {
      $(e.currentTarget).addClass('active')
    }

然后添加一个名为'mouseleave'的新方法并添加以下代码:

Then add a new method named 'mouseleave' and add this code:

mouseleave: function () {
      this.$menu.find('.active').removeClass('active')
}

希望这将对遇到类似问题的所有人有所帮助.

Hopefully this will help anyone with a similar problem.

这篇关于Bootstrap Typeahead单击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！