0
我準備了以下代碼以進行實時搜索。在輸入焦點上，出現可用選項列表。在輸入模糊時，選項消失。這是我的問題。當您單擊列表中的項目時，輸入會失去焦點，並且在點擊事件發生之前列表消失。自定義datalist - 選項在選擇前消失
var artists = [{"artist":"3 Doors Down"},{"artist":"5 Seconds of Summer"},{"artist":"Adele"},{"artist":"Alicia Keys"},{"artist":"Amanda Abizaid"}];
function liveSearch(element) {
return new liveSearch.prototype.init(element);
}
liveSearch.prototype = {
init : function(element) {
if (!element) {
this.element = document.createElement("ul");
this.element.classList.add("liveSearch");
} else {
this.element = element;
}
},
update : function(queryElement) {
this.clear();
var lookUpArray = queryElement.name + "s";
var results = this.search(artists, queryElement.value, queryElement.name);
for (var i = 0; i < results.length; i++) {
var li = document.createElement("li");
var value = results[i];
if (queryElement.value != "") {
var re = new RegExp(queryElement.value, "gi");
value = value.replace(re, "<span class=\"highlight\">" + "$&" + "</span>");
}
li.innerHTML = value;
this.element.appendChild(li);
}
return results.length;
},
search : function(lookUpArray, string) {
var results = [];
for (var i = 0; i < lookUpArray.length; i++) {
if (lookUpArray[i].artist.toLowerCase().search(string.toLowerCase()) != -1) {
results.push(lookUpArray[i].artist);
}
}
return results;
},
clear : function() {
this.element.innerHTML = "";
},
hidden : function() {
this.element.style.display = "none";
},
visible : function() {
this.element.style.display = "";
},
remove : function() {
this.element.parentElement.removeChild(this.element);
},
};
liveSearch.prototype.init.prototype = liveSearch.prototype;
$("#lyrics-form").on("focus", "input.liveSearch-input", function() {
this.parentElement.appendChild(liveSearch().element);
if (liveSearch(this.nextElementSibling).update(this)) {
liveSearch(this.nextElementSibling).visible();
} else {
liveSearch(this.nextElementSibling).hidden();
}
});
$("#lyrics-form").on("blur", "input.liveSearch-input", function() {
liveSearch(this.nextElementSibling).remove();
});
$("#lyrics-form").on("keyup", "input.liveSearch-input", function() {
if (this.value != "") {
if (liveSearch(this.nextElementSibling).update(this)) {
liveSearch(this.nextElementSibling).visible();
} else {
liveSearch(this.nextElementSibling).hidden();
}
} else {
liveSearch(this.nextElementSibling).update(this);
}
});
$("#lyrics-form").on("click", "li", function() {
this.parentElement.previousElementSibling.value = this.innerText;
liveSearch(this.parentElement).hidden();
});input, ul {
width: 180px;
box-sizing: border-box;
}
.liveSearch {
margin: 0;
border: 1px solid silver;
box-shadow: 0 2px 5px rgba(0,0,0,.5);
position: absolute;
background: white;
padding: 5px;
max-height: 195px;
width: 180px;
overflow-y: scroll;
z-index: 1000;
}
.liveSearch li {
padding: 2px 5px;
cursor: default;
}
.liveSearch li:hover {
background: rgba(0,0,0,.05);
color: black;
}
.liveSearch .highlight {
font-weight: bold;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="addlyrics.php" id="lyrics-form" method="post" autocomplete="off" enctype="multipart/form-data">
\t <input type="text" name="artist" id="artist" class="liveSearch-input" placeholder="Artist" required />
</form>我已經使用上的模糊超時要解決這個問題，但它不夠好。這是不一致的，更高的延遲使得設計變得醜陋。我怎樣才能解決這個問題？
$("#lyrics-form").on("blur", "input.liveSearch-input", function() {
/* liveSearch(this.nextElementSibling).remove(); */
setTimeout(function() {
liveSearch(this.nextElementSibling).remove();
}.bind(this), 100);
});
的完整列表，一旦一個項目已經選定消失。我發現這是每次我嘗試使用datalist時的情況（Chrome版本63.0.3239.84（官方版本）（64位）） –
@Rid我不認爲這是一個錯誤，因爲當你輸入框中時，它過濾列表項並返回匹配項。如果您在選擇後單擊該框，則會在您鍵入內容並返回了匹配項時對其進行處理。 – akinuri
你可能是對的，但我覺得這個櫃檯很直觀，我知道我無法將它呈現給我們的用戶羣。 –