在 algolia 自动完成字段上检测焦点事件
Detecting focus event on algolia autocomplete field
我的模板中有一个用于 algolia 自动完成的输入：
<form action="/search" method="get">
<div class="input-group">
<span class="input-group-addon">
<button type="submit" class="search-button">
<i class="ion-ios-search-strong"></i>
</button>
</span>
<input type="text" name="q" class="search-input search-input-small-js form-control aa-input-search" placeholder="Search for players and videos ..." aria-describedby="basic-addon1">
</div>
</form>
这是 css 的：
.algolia-autocomplete {
display: flex!important;
flex: auto!important;
}
.aa-dropdown-menu {
position: relative;
top: -6px;
border-radius: 3px;
margin: 6px 0 0;
padding: 0;
text-align: left;
height: auto;
position: relative;
background: $white;
border: 1px solid #ccc;
width: 100%;
left: 0 !important;
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
}
.aa-dropdown-menu:before {
position: absolute;
content: '';
width: 14px;
height: 14px;
background: #fff;
z-index: 0;
top: -7px;
border-top: 1px solid #D9D9D9;
border-right: 1px solid #D9D9D9;
transform: rotate(-45deg);
border-radius: 2px;
z-index: 999;
display: block;
left: 24px;
}
.aa-dropdown-menu .aa-suggestions {
position: relative;
z-index: 1000;
}
.aa-dropdown-menu [class^="aa-dataset-"] {
position: relative;
border: 0;
border-radius: 3px;
overflow: auto;
padding: 8px 8px 8px;
color: #3c3e42;
font-weight: 500;
}
.aa-dropdown-menu * {
box-sizing: border-box;
}
.aa-suggestion {
padding: 0 4px 0;
display: block;
width: 100%;
height: 38px;
clear: both;
}
.aa-suggestion span {
white-space: nowrap !important;
text-overflow: ellipsis;
overflow: hidden;
display: block;
float: left;
line-height: 1em;
width: calc(100% - 30px);
}
.aa-suggestion.aa-cursor {
background-color: transparent;
}
.aa-suggestion em {
color: #00bcd4;
font-weight: 700;
}
.aa-suggestion img {
float: left;
height: 44px;
width: 44px;
margin-right: 6px;
}
.aa-suggestion a {
color: #3c3e42;
}
.aa-suggestions-category {
font-weight: 700;
color: #3c3e42;
border-bottom: 1px solid rgba(102, 105, 105, 0.17);
}
.powered-by-algolia {
padding-left: 15px;
border-top: 1px solid rgba(102, 105, 105, 0.17);
display: flex;
align-items: center;
height: 30px;
}
.aa-input-container {
display: inline-block;
position: relative; }
.aa-input-search {
width: 100%;
height: 100%;
padding: 12px 28px 12px 12px;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; }
.aa-input-search::-webkit-search-decoration, .aa-input-search::-webkit-search-cancel-button, .aa-input-search::-webkit-search-results-button, .aa-input-search::-webkit-search-results-decoration {
display: none;
}
.media {
margin: 10px 0;
}
.media-body {
p {
margin: 0;
}
}
这是我的 js 文件：
var client = algoliasearch('myKey', 'myValue');
var players = client.initIndex('players');
var videos = client.initIndex('videos');
var timeAgo = function(selector) {
var templates = {
prefix: "",
suffix: " ago",
seconds: "less than a minute",
minute: "about a minute",
minutes: "%d minutes",
hour: "about an hour",
hours: "about %d hours",
day: "a day",
days: "%d days",
month: "about a month",
months: "%d months",
year: "about a year",
years: "%d years"
};
var template = function (t, n) {
return templates[t] && templates[t].replace(/%d/i, Math.abs(Math.round(n)));
};
var timer = function (time) {
if (!time) return;
time = time.replace(/\.\d+/, ""); // remove milliseconds
time = time.replace(/-/, "/").replace(/-/, "/");
time = time.replace(/T/, " ").replace(/Z/, " UTC");
time = time.replace(/([\+\-]\d\d)\:?(\d\d)/, " "); // -04:00 -> -0400
time = new Date(time * 1000 || time);
var now = new Date();
var seconds = ((now.getTime() - time) * .001) >> 0;
var minutes = seconds / 60;
var hours = minutes / 60;
var days = hours / 24;
var years = days / 365;
return templates.prefix + (
seconds < 45 && template('seconds', seconds) || seconds < 90 && template('minute', 1) || minutes < 45 && template('minutes', minutes) || minutes < 90 && template('hour', 1) || hours < 24 && template('hours', hours) || hours < 42 && template('day', 1) || days < 30 && template('days', days) || days < 45 && template('month', 1) || days < 365 && template('months', days / 30) || years < 1.5 && template('year', 1) || template('years', years)) + templates.suffix;
};
var elements = document.getElementsByClassName('timeago');
for (var i in elements) {
var $this = elements[i];
if (typeof $this === 'object') {
$this.innerHTML = timer($this.getAttribute('title') || $this.getAttribute('datetime'));
}
}
// update time every minute
setTimeout(timeAgo, 60000);
};
autocomplete('.search-input', {
templates: {
footer: '<div class="powered-by-algolia"><div class="pull-right"><img src="/imagecache/xs/Algolia_logo_bg-white.jpg" /></div></div>'
}
},
[{
source: autocomplete.sources.hits(players, { hitsPerPage: 5 }),
displayKey: 'first_name',
templates: {
header: '<div class="aa-suggestions-category"><span>Players</span></div>',
suggestion: function(suggestion) {
var birthday = suggestion.birthday;
var birthdayArray = birthday.split('/');
var age = function (birthDay, birthMonth, birthYear) {
var todayDate = new Date();
var todayYear = todayDate.getFullYear();
var todayMonth = todayDate.getMonth();
var todayDay = todayDate.getDate();
var age = todayYear - birthYear;
if (todayMonth < birthMonth - 1){
age--;
}
if (birthMonth - 1 == todayMonth && todayDay < birthDay){
age--;
}
return age;
}
var old = age(birthdayArray[0], birthdayArray[1], birthdayArray[2]);
return '<span>'
+ '<a href="/player/' + suggestion.id + '/' + suggestion.first_name.toLowerCase() + '-' + suggestion.last_name.toLowerCase() + '">'
+ '<div class="media">'
+ '<div class="media-left">'
+ '<img class="media-object" src="/imagecache/small/' + suggestion.image_filename + '">'
+ '</div>'
+ '<div class="media-body">'
+ '<p>' + suggestion._highlightResult.first_name.value + " " + suggestion._highlightResult.last_name.value + '<small> ' + old + ' years</small>' + '</p>'
+ '<small> ' + suggestion.nationality + ' '+ suggestion.position + '</small>'
+ '</div>'
+ '</div>'
+ '</a>'
+'</span>';
}
}
},
{
source: autocomplete.sources.hits(videos, { hitsPerPage: 5 }),
displayKey: 'title',
templates: {
header: '<div class="aa-suggestions-category"><span>Videos</span></div>',
suggestion: function(suggestion) {
timeAgo();
return '<span>'
+ '<a href="/player/video/' + suggestion.uid + '/' + suggestion.player_name.toLowerCase() + '-' + suggestion.player_surname.toLowerCase() + '">'
+ '<div class="media">'
+ '<img class="d-flex mr-3" src="https://s3.eu-central-1.amazonaws.com/videos.football-talents.com/' + suggestion.video_id + '_1.jpg">'
+ '<div class="media-body">'
+ '<p>' + suggestion._highlightResult.title.value + ' <small class="timeago" title="' + suggestion.created_at + '">' + suggestion.created_at + '</small>' + '</p>'
+ '<small> ' + suggestion._highlightResult.player_name.value + " " + suggestion._highlightResult.player_surname.value + '</small>'
+ '</div>'
+ '</div>'
+ '</a>'
+'</span>';
}
}
}
]).on('autocomplete:updated', function(event, suggestion, dataset) {
var timeagoTimeout;
clearTimeout(timeagoTimeout);
timeAgo();
timeagoTimeout = setTimeout(timeAgo, 60000);
});
我尝试了多种方法来检测该输入字段上的焦点事件，但没有任何效果，这是其中一种尝试：
var input = document.getElementsByClassName('search-input-small-js')[0];
function inputFocused() {
if ($('body').hasClass('pml-open')) {
$('body').removeClass('pml-open');
$('html, body').css('overflowY', 'auto');
}
}
input.addEventListener('focusin', inputFocused);
如何在 algolia 自动完成上检测焦点事件，我试图在他们的 api 文档中找到该案例的一些事件，但找不到任何专门针对此的内容。不确定我该怎么做？
使用香草 JavaScript 您只需获取 DOM 节点并将 'focusin' 的事件侦听器附加到该元素。你已经做到了，它似乎工作得很好。
我最初使用的是您自己的代码，没有运行良好的 Algolia 库。作为对您评论的回应，我更新了使用 Algolia 的答案，建立在 Algolia 文档提供的官方示例之上。这也完全按预期工作。您应该 post 一个工作示例作为您问题的片段，以便人们更容易分析。
我可以断定你的问题不是焦点问题。
我敢打赌，您的 inputFocused 函数中的以下行未计算为真。也许尝试在 inputHandler 函数中设置一个断点并在它命中时检查 DOM 以查看 body 元素是否具有 'pml-open' class。
附带说明一下，您确定它是“pml-open”而不是“pnl-open”吗？
if($('body').hasClass('pml-open'))
或者将上一行的结果分配给一个变量，并将该值记录在您的 inputFocused 函数中。
例如
var pmlOpen = $('body').hasClass('pml-open');
console.log('pmlOpen is: ' + pmlOpen);
if(pmlOpen) {//...
下面的代码片段使用了位于 https://www.algolia.com/doc/tutorials/search-ui/autocomplete/auto-complete/
的自动完成教程（Algolia 事实上可靠的来源）中的代码
我可以确认输入在接收到焦点时触发了 focusin 事件，您可以通过 运行 代码片段亲自查看。
您的问题几乎可以肯定不是焦点问题。以下代码片段适用于 Chrome、Firefox、Edge 和 Internet Explorer 11。我无权访问 Safari 对其进行测试。
var client = algoliasearch("Q71HM8430Y", "7f42b7cbd41474bf777414c24302d4a4"),
index = client.initIndex("players");
autocomplete("#aa-demo-1-input", {
hint: !1,
debug: !0
}, {
source: autocomplete.sources.hits(index, {
hitsPerPage: 5
}),
displayKey: "name",
templates: {
suggestion: function(e) {
return "<span>" + e._highlightResult.name.value + "</span><span>" + e._highlightResult.team.value + "</span>"
}
}
});
var input = document.querySelector('#aa-demo-1-input');
input.addEventListener('focusin', inputFocused);
function inputFocused() {
console.log('input received focus');
}
@import "https://fonts.googleapis.com/css?family=Montserrat:400,700";
.aa-demo-1 {
height: 310px;
text-align: center
}
.aa-input-container p {
margin-bottom: 0 !important
}
.aa-demo-1 .aa-input-container {
display: inline-block;
position: relative
}
.aa-demo-1 .aa-input-container input[type=search] {
-webkit-box-shadow: 4px 4px 0 rgba(241, 241, 241, 0.35) !important;
box-shadow: 4px 4px 0 rgba(241, 241, 241, 0.35) !important
}
.aa-demo-1 .algolia-autocomplete {
top: 0 !important
}
.aa-demo-1 .aa-input-search {
width: 300px;
padding: 12px 28px 12px 12px;
border: 2px solid #e4e4e4;
border-radius: 4px;
-webkit-transition: .2s;
transition: .2s;
font-family: "Montserrat", sans-serif;
-webkit-box-shadow: 4px 4px 0 rgba(241, 241, 241, 0.35);
box-shadow: 4px 4px 0 rgba(241, 241, 241, 0.35);
font-size: 11px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #333;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none
}
.aa-demo-1 .aa-input-search::-webkit-search-decoration,
.aa-demo-1 .aa-input-search::-webkit-search-cancel-button,
.aa-demo-1 .aa-input-search::-webkit-search-results-button,
.aa-demo-1 .aa-input-search::-webkit-search-results-decoration {
display: none
}
.aa-demo-1 .aa-input-search:focus {
outline: 0;
border-color: #3a96cf
}
.aa-demo-1 .aa-input-container input[type=search]:focus {
-webkit-box-shadow: 4px 4px 0 rgba(58, 150, 207, 0.1) !important;
box-shadow: 4px 4px 0 rgba(58, 150, 207, 0.1) !important
}
.aa-demo-1 .aa-input-icon {
height: 16px;
width: 16px;
position: absolute;
top: 50%;
right: 16px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
fill: #e4e4e4;
pointer-events: none;
z-index: 10
}
.aa-demo-1 .aa-hint {
color: #e4e4e4
}
.aa-demo-1 .aa-dropdown-menu {
background-color: #fff;
border: 2px solid rgba(228, 228, 228, 0.6);
border-top-width: 1px;
font-family: "Montserrat", sans-serif;
width: 300px;
margin-top: 10px;
-webkit-box-shadow: 4px 4px 0 rgba(241, 241, 241, 0.35);
box-shadow: 4px 4px 0 rgba(241, 241, 241, 0.35);
font-size: 11px;
border-radius: 4px;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.aa-demo-1 .aa-suggestion {
padding: 12px !important;
border-bottom: 0 !important;
font-size: 1.1rem !important;
border-top: 1px solid rgba(228, 228, 228, 0.6) !important;
cursor: pointer;
-webkit-transition: .2s;
transition: .2s;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
.aa-demo-1 .aa-suggestion:hover,
.aa-demo-1 .aa-suggestion.aa-cursor {
background-color: rgba(241, 241, 241, 0.35) !important
}
.aa-demo-1 .aa-suggestion>span:first-child {
color: #333
}
.aa-demo-1 .aa-suggestion>span:last-child {
text-transform: uppercase;
color: #a9a9a9
}
.aa-demo-1 .aa-suggestion>span:first-child em,
.aa-demo-1 .aa-suggestion>span:last-child em {
font-weight: 700;
font-style: normal;
background-color: rgba(58, 150, 207, 0.1);
padding: 2px 0 2px 2px
}
<section>
<h2 id=see-it-in-action>See it in action</h2>
<link href="/doc/tutorials/search-ui/autocomplete/auto-complete.css" rel=stylesheet/>
<div class=aa-demo-1>
<div class=aa-input-container>
<p>
<input type=search id=aa-demo-1-input class=aa-input-search placeholder="Search for players or videos..." name=search autocomplete=off required=required/>
</p>
<svg id=icon-search class=aa-input-icon viewBox="654 -372 1664 1664">
<path d="M1806,332c0-123.3-43.8-228.8-131.5-316.5C1586.8-72.2,1481.3-116,1358-116s-228.8,43.8-316.5,131.5 C953.8,103.2,910,208.7,910,332s43.8,228.8,131.5,316.5C1129.2,736.2,1234.7,780,1358,780s228.8-43.8,316.5-131.5 C1762.2,560.8,1806,455.3,1806,332z M2318,1164c0,34.7-12.7,64.7-38,90s-55.3,38-90,38c-36,0-66-12.7-90-38l-343-342 c-119.3,82.7-252.3,124-399,124c-95.3,0-186.5-18.5-273.5-55.5s-162-87-225-150s-113-138-150-225S654,427.3,654,332 s18.5-186.5,55.5-273.5s87-162,150-225s138-113,225-150S1262.7-372,1358-372s186.5,18.5,273.5,55.5s162,87,225,150s113,138,150,225 S2062,236.7,2062,332c0,146.7-41.3,279.7-124,399l343,343C2305.7,1098.7,2318,1128.7,2318,1164z"/>
</svg>
</div>
</div>
<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
<script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.min.js"></script>
<script src="/doc/tutorials/4-search-ui/autocomplete/auto-complete.js"></script>
</section>
var input = document.getElementsByClassName('search-input search-input-small-js form-control aa-input-search')[0];
var test= document.getElementById("zxc");
input.onfocus=function(){
test.style.background="yellow";
test.innerHTML="someone start searching";
}
var client = algoliasearch('myKey', 'myValue');
var players = client.initIndex('players');
var videos = client.initIndex('videos');
var timeAgo = function(selector) {
var templates = {
prefix: "",
suffix: " ago",
seconds: "less than a minute",
minute: "about a minute",
minutes: "%d minutes",
hour: "about an hour",
hours: "about %d hours",
day: "a day",
days: "%d days",
month: "about a month",
months: "%d months",
year: "about a year",
years: "%d years"
};
var template = function (t, n) {
return templates[t] && templates[t].replace(/%d/i, Math.abs(Math.round(n)));
};
var timer = function (time) {
if (!time) return;
time = time.replace(/\.\d+/, ""); // remove milliseconds
time = time.replace(/-/, "/").replace(/-/, "/");
time = time.replace(/T/, " ").replace(/Z/, " UTC");
time = time.replace(/([\+\-]\d\d)\:?(\d\d)/, " "); // -04:00 -> -0400
time = new Date(time * 1000 || time);
var now = new Date();
var seconds = ((now.getTime() - time) * .001) >> 0;
var minutes = seconds / 60;
var hours = minutes / 60;
var days = hours / 24;
var years = days / 365;
return templates.prefix + (
seconds < 45 && template('seconds', seconds) || seconds < 90 && template('minute', 1) || minutes < 45 && template('minutes', minutes) || minutes < 90 && template('hour', 1) || hours < 24 && template('hours', hours) || hours < 42 && template('day', 1) || days < 30 && template('days', days) || days < 45 && template('month', 1) || days < 365 && template('months', days / 30) || years < 1.5 && template('year', 1) || template('years', years)) + templates.suffix;
};
var elements = document.getElementsByClassName('timeago');
for (var i in elements) {
var $this = elements[i];
if (typeof $this === 'object') {
$this.innerHTML = timer($this.getAttribute('title') || $this.getAttribute('datetime'));
}
}
// update time every minute
setTimeout(timeAgo, 60000);
};
autocomplete('.search-input', {
templates: {
footer: '<div class="powered-by-algolia"><div class="pull-right"><img src="/imagecache/xs/Algolia_logo_bg-white.jpg" /></div></div>'
}
},
[{
source: autocomplete.sources.hits(players, { hitsPerPage: 5 }),
displayKey: 'first_name',
templates: {
header: '<div class="aa-suggestions-category"><span>Players</span></div>',
suggestion: function(suggestion) {
var birthday = suggestion.birthday;
var birthdayArray = birthday.split('/');
var age = function (birthDay, birthMonth, birthYear) {
var todayDate = new Date();
var todayYear = todayDate.getFullYear();
var todayMonth = todayDate.getMonth();
var todayDay = todayDate.getDate();
var age = todayYear - birthYear;
if (todayMonth < birthMonth - 1){
age--;
}
if (birthMonth - 1 == todayMonth && todayDay < birthDay){
age--;
}
return age;
}
var old = age(birthdayArray[0], birthdayArray[1], birthdayArray[2]);
return '<span>'
+ '<a href="/player/' + suggestion.id + '/' + suggestion.first_name.toLowerCase() + '-' + suggestion.last_name.toLowerCase() + '">'
+ '<div class="media">'
+ '<div class="media-left">'
+ '<img class="media-object" src="/imagecache/small/' + suggestion.image_filename + '">'
+ '</div>'
+ '<div class="media-body">'
+ '<p>' + suggestion._highlightResult.first_name.value + " " + suggestion._highlightResult.last_name.value + '<small> ' + old + ' years</small>' + '</p>'
+ '<small> ' + suggestion.nationality + ' '+ suggestion.position + '</small>'
+ '</div>'
+ '</div>'
+ '</a>'
+'</span>';
}
}
},
{
source: autocomplete.sources.hits(videos, { hitsPerPage: 5 }),
displayKey: 'title',
templates: {
header: '<div class="aa-suggestions-category"><span>Videos</span></div>',
suggestion: function(suggestion) {
timeAgo();
return '<span>'
+ '<a href="/player/video/' + suggestion.uid + '/' + suggestion.player_name.toLowerCase() + '-' + suggestion.player_surname.toLowerCase() + '">'
+ '<div class="media">'
+ '<img class="d-flex mr-3" src="https://s3.eu-central-1.amazonaws.com/videos.football-talents.com/' + suggestion.video_id + '_1.jpg">'
+ '<div class="media-body">'
+ '<p>' + suggestion._highlightResult.title.value + ' <small class="timeago" title="' + suggestion.created_at + '">' + suggestion.created_at + '</small>' + '</p>'
+ '<small> ' + suggestion._highlightResult.player_name.value + " " + suggestion._highlightResult.player_surname.value + '</small>'
+ '</div>'
+ '</div>'
+ '</a>'
+'</span>';
}
}
}
]).on('autocomplete:updated', function(event, suggestion, dataset) {
var timeagoTimeout;
clearTimeout(timeagoTimeout);
timeAgo();
timeagoTimeout = setTimeout(timeAgo, 60000);
});
.algolia-autocomplete {
display: flex!important;
flex: auto!important;
}
.aa-dropdown-menu {
position: relative;
top: -6px;
border-radius: 3px;
margin: 6px 0 0;
padding: 0;
text-align: left;
height: auto;
position: relative;
background: $white;
border: 1px solid #ccc;
width: 100%;
left: 0 !important;
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
}
.aa-dropdown-menu:before {
position: absolute;
content: '';
width: 14px;
height: 14px;
background: #fff;
z-index: 0;
top: -7px;
border-top: 1px solid #D9D9D9;
border-right: 1px solid #D9D9D9;
transform: rotate(-45deg);
border-radius: 2px;
z-index: 999;
display: block;
left: 24px;
}
.aa-dropdown-menu .aa-suggestions {
position: relative;
z-index: 1000;
}
.aa-dropdown-menu [class^="aa-dataset-"] {
position: relative;
border: 0;
border-radius: 3px;
overflow: auto;
padding: 8px 8px 8px;
color: #3c3e42;
font-weight: 500;
}
.aa-dropdown-menu * {
box-sizing: border-box;
}
.aa-suggestion {
padding: 0 4px 0;
display: block;
width: 100%;
height: 38px;
clear: both;
}
.aa-suggestion span {
white-space: nowrap !important;
text-overflow: ellipsis;
overflow: hidden;
display: block;
float: left;
line-height: 1em;
width: calc(100% - 30px);
}
.aa-suggestion.aa-cursor {
background-color: transparent;
}
.aa-suggestion em {
color: #00bcd4;
font-weight: 700;
}
.aa-suggestion img {
float: left;
height: 44px;
width: 44px;
margin-right: 6px;
}
.aa-suggestion a {
color: #3c3e42;
}
.aa-suggestions-category {
font-weight: 700;
color: #3c3e42;
border-bottom: 1px solid rgba(102, 105, 105, 0.17);
}
.powered-by-algolia {
padding-left: 15px;
border-top: 1px solid rgba(102, 105, 105, 0.17);
display: flex;
align-items: center;
height: 30px;
}
.aa-input-container {
display: inline-block;
position: relative; }
.aa-input-search {
width: 100%;
height: 100%;
padding: 12px 28px 12px 12px;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; }
.aa-input-search::-webkit-search-decoration, .aa-input-search::-webkit-search-cancel-button, .aa-input-search::-webkit-search-results-button, .aa-input-search::-webkit-search-results-decoration {
display: none;
}
.media {
margin: 10px 0;
}
.media-body {
p {
margin: 0;
}
}
<span id="zxc"></span><br />
<form action="/search" method="get">
<div class="input-group">
<span class="input-group-addon">
<button type="submit" class="search-button">
<i class="ion-ios-search-strong"></i>
</button>
</span>
<input type="text" name="q" class="search-input search-input-small-js form-control aa-input-search" placeholder="Search for players and videos ..." aria-describedby="basic-addon1">
</div>
</form>
我添加 span over form 只是为了显示响应，我不知道这段代码是否会影响其他功能，但它可以检测输入何时聚焦，除非在 IE 8 中，对于 IE 8 你可以使用其他解决方法但是对于输入。
您可以使用 autocomplete:opened 检测对焦。设置 openOnFocus 为真
并添加 opened.
openOnFocus – 如果为 true，下拉菜单将在输入聚焦时打开。默认为假。
.on('autocomplete:opened', function (e) {
alert('opened on focus')
e.preventDefault()
});
我的模板中有一个用于 algolia 自动完成的输入：
<form action="/search" method="get">
<div class="input-group">
<span class="input-group-addon">
<button type="submit" class="search-button">
<i class="ion-ios-search-strong"></i>
</button>
</span>
<input type="text" name="q" class="search-input search-input-small-js form-control aa-input-search" placeholder="Search for players and videos ..." aria-describedby="basic-addon1">
</div>
</form>
这是 css 的：
.algolia-autocomplete {
display: flex!important;
flex: auto!important;
}
.aa-dropdown-menu {
position: relative;
top: -6px;
border-radius: 3px;
margin: 6px 0 0;
padding: 0;
text-align: left;
height: auto;
position: relative;
background: $white;
border: 1px solid #ccc;
width: 100%;
left: 0 !important;
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
}
.aa-dropdown-menu:before {
position: absolute;
content: '';
width: 14px;
height: 14px;
background: #fff;
z-index: 0;
top: -7px;
border-top: 1px solid #D9D9D9;
border-right: 1px solid #D9D9D9;
transform: rotate(-45deg);
border-radius: 2px;
z-index: 999;
display: block;
left: 24px;
}
.aa-dropdown-menu .aa-suggestions {
position: relative;
z-index: 1000;
}
.aa-dropdown-menu [class^="aa-dataset-"] {
position: relative;
border: 0;
border-radius: 3px;
overflow: auto;
padding: 8px 8px 8px;
color: #3c3e42;
font-weight: 500;
}
.aa-dropdown-menu * {
box-sizing: border-box;
}
.aa-suggestion {
padding: 0 4px 0;
display: block;
width: 100%;
height: 38px;
clear: both;
}
.aa-suggestion span {
white-space: nowrap !important;
text-overflow: ellipsis;
overflow: hidden;
display: block;
float: left;
line-height: 1em;
width: calc(100% - 30px);
}
.aa-suggestion.aa-cursor {
background-color: transparent;
}
.aa-suggestion em {
color: #00bcd4;
font-weight: 700;
}
.aa-suggestion img {
float: left;
height: 44px;
width: 44px;
margin-right: 6px;
}
.aa-suggestion a {
color: #3c3e42;
}
.aa-suggestions-category {
font-weight: 700;
color: #3c3e42;
border-bottom: 1px solid rgba(102, 105, 105, 0.17);
}
.powered-by-algolia {
padding-left: 15px;
border-top: 1px solid rgba(102, 105, 105, 0.17);
display: flex;
align-items: center;
height: 30px;
}
.aa-input-container {
display: inline-block;
position: relative; }
.aa-input-search {
width: 100%;
height: 100%;
padding: 12px 28px 12px 12px;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; }
.aa-input-search::-webkit-search-decoration, .aa-input-search::-webkit-search-cancel-button, .aa-input-search::-webkit-search-results-button, .aa-input-search::-webkit-search-results-decoration {
display: none;
}
.media {
margin: 10px 0;
}
.media-body {
p {
margin: 0;
}
}
这是我的 js 文件：
var client = algoliasearch('myKey', 'myValue');
var players = client.initIndex('players');
var videos = client.initIndex('videos');
var timeAgo = function(selector) {
var templates = {
prefix: "",
suffix: " ago",
seconds: "less than a minute",
minute: "about a minute",
minutes: "%d minutes",
hour: "about an hour",
hours: "about %d hours",
day: "a day",
days: "%d days",
month: "about a month",
months: "%d months",
year: "about a year",
years: "%d years"
};
var template = function (t, n) {
return templates[t] && templates[t].replace(/%d/i, Math.abs(Math.round(n)));
};
var timer = function (time) {
if (!time) return;
time = time.replace(/\.\d+/, ""); // remove milliseconds
time = time.replace(/-/, "/").replace(/-/, "/");
time = time.replace(/T/, " ").replace(/Z/, " UTC");
time = time.replace(/([\+\-]\d\d)\:?(\d\d)/, " "); // -04:00 -> -0400
time = new Date(time * 1000 || time);
var now = new Date();
var seconds = ((now.getTime() - time) * .001) >> 0;
var minutes = seconds / 60;
var hours = minutes / 60;
var days = hours / 24;
var years = days / 365;
return templates.prefix + (
seconds < 45 && template('seconds', seconds) || seconds < 90 && template('minute', 1) || minutes < 45 && template('minutes', minutes) || minutes < 90 && template('hour', 1) || hours < 24 && template('hours', hours) || hours < 42 && template('day', 1) || days < 30 && template('days', days) || days < 45 && template('month', 1) || days < 365 && template('months', days / 30) || years < 1.5 && template('year', 1) || template('years', years)) + templates.suffix;
};
var elements = document.getElementsByClassName('timeago');
for (var i in elements) {
var $this = elements[i];
if (typeof $this === 'object') {
$this.innerHTML = timer($this.getAttribute('title') || $this.getAttribute('datetime'));
}
}
// update time every minute
setTimeout(timeAgo, 60000);
};
autocomplete('.search-input', {
templates: {
footer: '<div class="powered-by-algolia"><div class="pull-right"><img src="/imagecache/xs/Algolia_logo_bg-white.jpg" /></div></div>'
}
},
[{
source: autocomplete.sources.hits(players, { hitsPerPage: 5 }),
displayKey: 'first_name',
templates: {
header: '<div class="aa-suggestions-category"><span>Players</span></div>',
suggestion: function(suggestion) {
var birthday = suggestion.birthday;
var birthdayArray = birthday.split('/');
var age = function (birthDay, birthMonth, birthYear) {
var todayDate = new Date();
var todayYear = todayDate.getFullYear();
var todayMonth = todayDate.getMonth();
var todayDay = todayDate.getDate();
var age = todayYear - birthYear;
if (todayMonth < birthMonth - 1){
age--;
}
if (birthMonth - 1 == todayMonth && todayDay < birthDay){
age--;
}
return age;
}
var old = age(birthdayArray[0], birthdayArray[1], birthdayArray[2]);
return '<span>'
+ '<a href="/player/' + suggestion.id + '/' + suggestion.first_name.toLowerCase() + '-' + suggestion.last_name.toLowerCase() + '">'
+ '<div class="media">'
+ '<div class="media-left">'
+ '<img class="media-object" src="/imagecache/small/' + suggestion.image_filename + '">'
+ '</div>'
+ '<div class="media-body">'
+ '<p>' + suggestion._highlightResult.first_name.value + " " + suggestion._highlightResult.last_name.value + '<small> ' + old + ' years</small>' + '</p>'
+ '<small> ' + suggestion.nationality + ' '+ suggestion.position + '</small>'
+ '</div>'
+ '</div>'
+ '</a>'
+'</span>';
}
}
},
{
source: autocomplete.sources.hits(videos, { hitsPerPage: 5 }),
displayKey: 'title',
templates: {
header: '<div class="aa-suggestions-category"><span>Videos</span></div>',
suggestion: function(suggestion) {
timeAgo();
return '<span>'
+ '<a href="/player/video/' + suggestion.uid + '/' + suggestion.player_name.toLowerCase() + '-' + suggestion.player_surname.toLowerCase() + '">'
+ '<div class="media">'
+ '<img class="d-flex mr-3" src="https://s3.eu-central-1.amazonaws.com/videos.football-talents.com/' + suggestion.video_id + '_1.jpg">'
+ '<div class="media-body">'
+ '<p>' + suggestion._highlightResult.title.value + ' <small class="timeago" title="' + suggestion.created_at + '">' + suggestion.created_at + '</small>' + '</p>'
+ '<small> ' + suggestion._highlightResult.player_name.value + " " + suggestion._highlightResult.player_surname.value + '</small>'
+ '</div>'
+ '</div>'
+ '</a>'
+'</span>';
}
}
}
]).on('autocomplete:updated', function(event, suggestion, dataset) {
var timeagoTimeout;
clearTimeout(timeagoTimeout);
timeAgo();
timeagoTimeout = setTimeout(timeAgo, 60000);
});
我尝试了多种方法来检测该输入字段上的焦点事件，但没有任何效果，这是其中一种尝试：
var input = document.getElementsByClassName('search-input-small-js')[0];
function inputFocused() {
if ($('body').hasClass('pml-open')) {
$('body').removeClass('pml-open');
$('html, body').css('overflowY', 'auto');
}
}
input.addEventListener('focusin', inputFocused);
如何在 algolia 自动完成上检测焦点事件，我试图在他们的 api 文档中找到该案例的一些事件，但找不到任何专门针对此的内容。不确定我该怎么做？
使用香草 JavaScript 您只需获取 DOM 节点并将 'focusin' 的事件侦听器附加到该元素。你已经做到了，它似乎工作得很好。
我最初使用的是您自己的代码，没有运行良好的 Algolia 库。作为对您评论的回应，我更新了使用 Algolia 的答案，建立在 Algolia 文档提供的官方示例之上。这也完全按预期工作。您应该 post 一个工作示例作为您问题的片段，以便人们更容易分析。
我可以断定你的问题不是焦点问题。
我敢打赌，您的 inputFocused 函数中的以下行未计算为真。也许尝试在 inputHandler 函数中设置一个断点并在它命中时检查 DOM 以查看 body 元素是否具有 'pml-open' class。
附带说明一下，您确定它是“pml-open”而不是“pnl-open”吗？
if($('body').hasClass('pml-open'))
或者将上一行的结果分配给一个变量，并将该值记录在您的 inputFocused 函数中。
例如
var pmlOpen = $('body').hasClass('pml-open');
console.log('pmlOpen is: ' + pmlOpen);
if(pmlOpen) {//...
下面的代码片段使用了位于 https://www.algolia.com/doc/tutorials/search-ui/autocomplete/auto-complete/
的自动完成教程（Algolia 事实上可靠的来源）中的代码我可以确认输入在接收到焦点时触发了 focusin 事件，您可以通过 运行 代码片段亲自查看。
您的问题几乎可以肯定不是焦点问题。以下代码片段适用于 Chrome、Firefox、Edge 和 Internet Explorer 11。我无权访问 Safari 对其进行测试。
var client = algoliasearch("Q71HM8430Y", "7f42b7cbd41474bf777414c24302d4a4"),
index = client.initIndex("players");
autocomplete("#aa-demo-1-input", {
hint: !1,
debug: !0
}, {
source: autocomplete.sources.hits(index, {
hitsPerPage: 5
}),
displayKey: "name",
templates: {
suggestion: function(e) {
return "<span>" + e._highlightResult.name.value + "</span><span>" + e._highlightResult.team.value + "</span>"
}
}
});
var input = document.querySelector('#aa-demo-1-input');
input.addEventListener('focusin', inputFocused);
function inputFocused() {
console.log('input received focus');
}
@import "https://fonts.googleapis.com/css?family=Montserrat:400,700";
.aa-demo-1 {
height: 310px;
text-align: center
}
.aa-input-container p {
margin-bottom: 0 !important
}
.aa-demo-1 .aa-input-container {
display: inline-block;
position: relative
}
.aa-demo-1 .aa-input-container input[type=search] {
-webkit-box-shadow: 4px 4px 0 rgba(241, 241, 241, 0.35) !important;
box-shadow: 4px 4px 0 rgba(241, 241, 241, 0.35) !important
}
.aa-demo-1 .algolia-autocomplete {
top: 0 !important
}
.aa-demo-1 .aa-input-search {
width: 300px;
padding: 12px 28px 12px 12px;
border: 2px solid #e4e4e4;
border-radius: 4px;
-webkit-transition: .2s;
transition: .2s;
font-family: "Montserrat", sans-serif;
-webkit-box-shadow: 4px 4px 0 rgba(241, 241, 241, 0.35);
box-shadow: 4px 4px 0 rgba(241, 241, 241, 0.35);
font-size: 11px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #333;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none
}
.aa-demo-1 .aa-input-search::-webkit-search-decoration,
.aa-demo-1 .aa-input-search::-webkit-search-cancel-button,
.aa-demo-1 .aa-input-search::-webkit-search-results-button,
.aa-demo-1 .aa-input-search::-webkit-search-results-decoration {
display: none
}
.aa-demo-1 .aa-input-search:focus {
outline: 0;
border-color: #3a96cf
}
.aa-demo-1 .aa-input-container input[type=search]:focus {
-webkit-box-shadow: 4px 4px 0 rgba(58, 150, 207, 0.1) !important;
box-shadow: 4px 4px 0 rgba(58, 150, 207, 0.1) !important
}
.aa-demo-1 .aa-input-icon {
height: 16px;
width: 16px;
position: absolute;
top: 50%;
right: 16px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
fill: #e4e4e4;
pointer-events: none;
z-index: 10
}
.aa-demo-1 .aa-hint {
color: #e4e4e4
}
.aa-demo-1 .aa-dropdown-menu {
background-color: #fff;
border: 2px solid rgba(228, 228, 228, 0.6);
border-top-width: 1px;
font-family: "Montserrat", sans-serif;
width: 300px;
margin-top: 10px;
-webkit-box-shadow: 4px 4px 0 rgba(241, 241, 241, 0.35);
box-shadow: 4px 4px 0 rgba(241, 241, 241, 0.35);
font-size: 11px;
border-radius: 4px;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.aa-demo-1 .aa-suggestion {
padding: 12px !important;
border-bottom: 0 !important;
font-size: 1.1rem !important;
border-top: 1px solid rgba(228, 228, 228, 0.6) !important;
cursor: pointer;
-webkit-transition: .2s;
transition: .2s;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
.aa-demo-1 .aa-suggestion:hover,
.aa-demo-1 .aa-suggestion.aa-cursor {
background-color: rgba(241, 241, 241, 0.35) !important
}
.aa-demo-1 .aa-suggestion>span:first-child {
color: #333
}
.aa-demo-1 .aa-suggestion>span:last-child {
text-transform: uppercase;
color: #a9a9a9
}
.aa-demo-1 .aa-suggestion>span:first-child em,
.aa-demo-1 .aa-suggestion>span:last-child em {
font-weight: 700;
font-style: normal;
background-color: rgba(58, 150, 207, 0.1);
padding: 2px 0 2px 2px
}
<section>
<h2 id=see-it-in-action>See it in action</h2>
<link href="/doc/tutorials/search-ui/autocomplete/auto-complete.css" rel=stylesheet/>
<div class=aa-demo-1>
<div class=aa-input-container>
<p>
<input type=search id=aa-demo-1-input class=aa-input-search placeholder="Search for players or videos..." name=search autocomplete=off required=required/>
</p>
<svg id=icon-search class=aa-input-icon viewBox="654 -372 1664 1664">
<path d="M1806,332c0-123.3-43.8-228.8-131.5-316.5C1586.8-72.2,1481.3-116,1358-116s-228.8,43.8-316.5,131.5 C953.8,103.2,910,208.7,910,332s43.8,228.8,131.5,316.5C1129.2,736.2,1234.7,780,1358,780s228.8-43.8,316.5-131.5 C1762.2,560.8,1806,455.3,1806,332z M2318,1164c0,34.7-12.7,64.7-38,90s-55.3,38-90,38c-36,0-66-12.7-90-38l-343-342 c-119.3,82.7-252.3,124-399,124c-95.3,0-186.5-18.5-273.5-55.5s-162-87-225-150s-113-138-150-225S654,427.3,654,332 s18.5-186.5,55.5-273.5s87-162,150-225s138-113,225-150S1262.7-372,1358-372s186.5,18.5,273.5,55.5s162,87,225,150s113,138,150,225 S2062,236.7,2062,332c0,146.7-41.3,279.7-124,399l343,343C2305.7,1098.7,2318,1128.7,2318,1164z"/>
</svg>
</div>
</div>
<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
<script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.min.js"></script>
<script src="/doc/tutorials/4-search-ui/autocomplete/auto-complete.js"></script>
</section>
var input = document.getElementsByClassName('search-input search-input-small-js form-control aa-input-search')[0];
var test= document.getElementById("zxc");
input.onfocus=function(){
test.style.background="yellow";
test.innerHTML="someone start searching";
}
var client = algoliasearch('myKey', 'myValue');
var players = client.initIndex('players');
var videos = client.initIndex('videos');
var timeAgo = function(selector) {
var templates = {
prefix: "",
suffix: " ago",
seconds: "less than a minute",
minute: "about a minute",
minutes: "%d minutes",
hour: "about an hour",
hours: "about %d hours",
day: "a day",
days: "%d days",
month: "about a month",
months: "%d months",
year: "about a year",
years: "%d years"
};
var template = function (t, n) {
return templates[t] && templates[t].replace(/%d/i, Math.abs(Math.round(n)));
};
var timer = function (time) {
if (!time) return;
time = time.replace(/\.\d+/, ""); // remove milliseconds
time = time.replace(/-/, "/").replace(/-/, "/");
time = time.replace(/T/, " ").replace(/Z/, " UTC");
time = time.replace(/([\+\-]\d\d)\:?(\d\d)/, " "); // -04:00 -> -0400
time = new Date(time * 1000 || time);
var now = new Date();
var seconds = ((now.getTime() - time) * .001) >> 0;
var minutes = seconds / 60;
var hours = minutes / 60;
var days = hours / 24;
var years = days / 365;
return templates.prefix + (
seconds < 45 && template('seconds', seconds) || seconds < 90 && template('minute', 1) || minutes < 45 && template('minutes', minutes) || minutes < 90 && template('hour', 1) || hours < 24 && template('hours', hours) || hours < 42 && template('day', 1) || days < 30 && template('days', days) || days < 45 && template('month', 1) || days < 365 && template('months', days / 30) || years < 1.5 && template('year', 1) || template('years', years)) + templates.suffix;
};
var elements = document.getElementsByClassName('timeago');
for (var i in elements) {
var $this = elements[i];
if (typeof $this === 'object') {
$this.innerHTML = timer($this.getAttribute('title') || $this.getAttribute('datetime'));
}
}
// update time every minute
setTimeout(timeAgo, 60000);
};
autocomplete('.search-input', {
templates: {
footer: '<div class="powered-by-algolia"><div class="pull-right"><img src="/imagecache/xs/Algolia_logo_bg-white.jpg" /></div></div>'
}
},
[{
source: autocomplete.sources.hits(players, { hitsPerPage: 5 }),
displayKey: 'first_name',
templates: {
header: '<div class="aa-suggestions-category"><span>Players</span></div>',
suggestion: function(suggestion) {
var birthday = suggestion.birthday;
var birthdayArray = birthday.split('/');
var age = function (birthDay, birthMonth, birthYear) {
var todayDate = new Date();
var todayYear = todayDate.getFullYear();
var todayMonth = todayDate.getMonth();
var todayDay = todayDate.getDate();
var age = todayYear - birthYear;
if (todayMonth < birthMonth - 1){
age--;
}
if (birthMonth - 1 == todayMonth && todayDay < birthDay){
age--;
}
return age;
}
var old = age(birthdayArray[0], birthdayArray[1], birthdayArray[2]);
return '<span>'
+ '<a href="/player/' + suggestion.id + '/' + suggestion.first_name.toLowerCase() + '-' + suggestion.last_name.toLowerCase() + '">'
+ '<div class="media">'
+ '<div class="media-left">'
+ '<img class="media-object" src="/imagecache/small/' + suggestion.image_filename + '">'
+ '</div>'
+ '<div class="media-body">'
+ '<p>' + suggestion._highlightResult.first_name.value + " " + suggestion._highlightResult.last_name.value + '<small> ' + old + ' years</small>' + '</p>'
+ '<small> ' + suggestion.nationality + ' '+ suggestion.position + '</small>'
+ '</div>'
+ '</div>'
+ '</a>'
+'</span>';
}
}
},
{
source: autocomplete.sources.hits(videos, { hitsPerPage: 5 }),
displayKey: 'title',
templates: {
header: '<div class="aa-suggestions-category"><span>Videos</span></div>',
suggestion: function(suggestion) {
timeAgo();
return '<span>'
+ '<a href="/player/video/' + suggestion.uid + '/' + suggestion.player_name.toLowerCase() + '-' + suggestion.player_surname.toLowerCase() + '">'
+ '<div class="media">'
+ '<img class="d-flex mr-3" src="https://s3.eu-central-1.amazonaws.com/videos.football-talents.com/' + suggestion.video_id + '_1.jpg">'
+ '<div class="media-body">'
+ '<p>' + suggestion._highlightResult.title.value + ' <small class="timeago" title="' + suggestion.created_at + '">' + suggestion.created_at + '</small>' + '</p>'
+ '<small> ' + suggestion._highlightResult.player_name.value + " " + suggestion._highlightResult.player_surname.value + '</small>'
+ '</div>'
+ '</div>'
+ '</a>'
+'</span>';
}
}
}
]).on('autocomplete:updated', function(event, suggestion, dataset) {
var timeagoTimeout;
clearTimeout(timeagoTimeout);
timeAgo();
timeagoTimeout = setTimeout(timeAgo, 60000);
});
.algolia-autocomplete {
display: flex!important;
flex: auto!important;
}
.aa-dropdown-menu {
position: relative;
top: -6px;
border-radius: 3px;
margin: 6px 0 0;
padding: 0;
text-align: left;
height: auto;
position: relative;
background: $white;
border: 1px solid #ccc;
width: 100%;
left: 0 !important;
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
}
.aa-dropdown-menu:before {
position: absolute;
content: '';
width: 14px;
height: 14px;
background: #fff;
z-index: 0;
top: -7px;
border-top: 1px solid #D9D9D9;
border-right: 1px solid #D9D9D9;
transform: rotate(-45deg);
border-radius: 2px;
z-index: 999;
display: block;
left: 24px;
}
.aa-dropdown-menu .aa-suggestions {
position: relative;
z-index: 1000;
}
.aa-dropdown-menu [class^="aa-dataset-"] {
position: relative;
border: 0;
border-radius: 3px;
overflow: auto;
padding: 8px 8px 8px;
color: #3c3e42;
font-weight: 500;
}
.aa-dropdown-menu * {
box-sizing: border-box;
}
.aa-suggestion {
padding: 0 4px 0;
display: block;
width: 100%;
height: 38px;
clear: both;
}
.aa-suggestion span {
white-space: nowrap !important;
text-overflow: ellipsis;
overflow: hidden;
display: block;
float: left;
line-height: 1em;
width: calc(100% - 30px);
}
.aa-suggestion.aa-cursor {
background-color: transparent;
}
.aa-suggestion em {
color: #00bcd4;
font-weight: 700;
}
.aa-suggestion img {
float: left;
height: 44px;
width: 44px;
margin-right: 6px;
}
.aa-suggestion a {
color: #3c3e42;
}
.aa-suggestions-category {
font-weight: 700;
color: #3c3e42;
border-bottom: 1px solid rgba(102, 105, 105, 0.17);
}
.powered-by-algolia {
padding-left: 15px;
border-top: 1px solid rgba(102, 105, 105, 0.17);
display: flex;
align-items: center;
height: 30px;
}
.aa-input-container {
display: inline-block;
position: relative; }
.aa-input-search {
width: 100%;
height: 100%;
padding: 12px 28px 12px 12px;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; }
.aa-input-search::-webkit-search-decoration, .aa-input-search::-webkit-search-cancel-button, .aa-input-search::-webkit-search-results-button, .aa-input-search::-webkit-search-results-decoration {
display: none;
}
.media {
margin: 10px 0;
}
.media-body {
p {
margin: 0;
}
}
<span id="zxc"></span><br />
<form action="/search" method="get">
<div class="input-group">
<span class="input-group-addon">
<button type="submit" class="search-button">
<i class="ion-ios-search-strong"></i>
</button>
</span>
<input type="text" name="q" class="search-input search-input-small-js form-control aa-input-search" placeholder="Search for players and videos ..." aria-describedby="basic-addon1">
</div>
</form>
我添加 span over form 只是为了显示响应，我不知道这段代码是否会影响其他功能，但它可以检测输入何时聚焦，除非在 IE 8 中，对于 IE 8 你可以使用其他解决方法但是对于输入。
您可以使用 autocomplete:opened 检测对焦。设置 openOnFocus 为真
并添加 opened.
openOnFocus – 如果为 true，下拉菜单将在输入聚焦时打开。默认为假。
.on('autocomplete:opened', function (e) {
alert('opened on focus')
e.preventDefault()
});