[英]Bootstrap Typeahead click event
I'm using bootstrap-typeahead.js v2.0.0 for an autocomplete search. 我正在使用bootstrap-typeahead.js v2.0.0进行自动完成搜索。 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". 我有一个单击事件来查看结果,但是它只能像10次中的1次一样工作,在其他情况下,我会收到一个错误:“ Uncaught SyntaxError:Unexpected token u”。
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. 我环顾四周,发现了这一点: https : //github.com/twitter/bootstrap/issues/4018 ,我在那里尝试了解决方案,但似乎没有任何效果。 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: 这是您要做的:
Open bootstrap-typeahead.js and find the listen method on row 203 and modify like this: 打开bootstrap-typeahead.js并在第203行上找到listen方法并进行如下修改:
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))
}
The only difference here is that I added a listener on 'mouseleave'. 唯一的区别是我在“ mouseleave”上添加了一个侦听器。
Go to the mouseenter method on row 278 and change it to this: 转到第278行的mouseenter方法,并将其更改为:
mouseenter: function (e) {
$(e.currentTarget).addClass('active')
}
Then add a new method named 'mouseleave' and add this code: 然后添加一个名为“ mouseleave”的新方法并添加以下代码:
mouseleave: function () {
this.$menu.find('.active').removeClass('active')
}
Hopefully this will help anyone with a similar problem. 希望这会帮助任何有类似问题的人。
Here is a much simpler solution. 这是一个更简单的解决方案。 The "Blur" event binds before the click event. “模糊”事件在单击事件之前绑定。 Simply add a delay for the blur and this will fix the problem. 只需为模糊添加延迟,即可解决问题。
<input type="text" placeholder="Enter a Name" onblur="hidesuggest();" id="suggestbox">
<script>
function hidesuggest(){
setTimeout("$('#suggestbox').toggle();",200);
}
</script>
The extra 200 milliseconds gives enough time for the "click" binding to execute on the mouse click. 额外的200毫秒为“单击”绑定提供了足够的时间来在鼠标单击时执行。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.