フォームフィールドに入力すると、配列からの結果のドロップダウンが表示される自動入力検索を行いました。
私が抱えている問題は、ドロップダウンの外側をクリックすると、本来のように消えてしまうのですが、フォームフィールドにもう一度入力し始めると、ドロップダウンが表示されないということです。私はこれを達成するためにjQueryを使用しようとしています:
これは、検索フィールドの下にドロップダウンを表示するためのものです。
const input = document.querySelector('#FAVORITE_LOCATION');
const suggestions = document.querySelector('.suggestions ul');
const country = ['USA', 'Canada'];
function search(str) {
let results = [];
const val = str.toLowerCase();
for (i = 0; i < country.length; i++) {
if (country[i].toLowerCase().indexOf(val) > -1) {
results.push(country[i]);
}
}
return results;
}
function searchHandler(e) {
const inputVal = e.currentTarget.value;
let results = [];
if (inputVal.length > 0) {
results = search(inputVal);
}
showSuggestions(results);
}
function showSuggestions(results) {
suggestions.innerHTML = '';
if (results.length > 0) {
for (i = 0; i < results.length; i++) {
suggestions.innerHTML += `<li>${results[i]}</li>`;
}
suggestions.classList.add('has-suggestions');
} else {
results = [];
suggestions.innerHTML = '';
suggestions.classList.remove('has-suggestions');
}
}
function useSuggestion(e) {
input.value = e.target.innerText;
input.focus();
suggestions.innerHTML = '';
suggestions.classList.remove('has-suggestions');
}
input.addEventListener('keyup', searchHandler);
suggestions.addEventListener('click', useSuggestion);
以下は、入力されるオートフィルを非表示にしようとしている場所です。
$(document).on('click', function(event){
var container = $("ul.has-suggestions");
if (!container.is(event.target) &&
container.has(event.target).length === 0)
{
container.hide();
}else{
container.show();
}
});
最後に、ドロップダウン自体のCSSは次のとおりです
.search-container {
position: relative;
}
.search-container input,
.search-container .suggestions {
width: 100%;
}
.search-container input {
background-color: white;
height: 60px;
padding: 0 10px;
}
.search-container .suggestions {
position: absolute;
top: 80px;
}
ul {
display: none;
list-style-type: none;
padding: 0;
margin: 0;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
max-height: 200px;
overflow-y: auto;
}
ul.has-suggestions {
display: block;
}
ul li {
padding: 10px;
cursor: pointer;
background-color: white;
color: black;
}
ul.has-suggestionsは、ユーザーがフォームフィールドに入力し始めると、display:blockに設定されます。これにより、入力されたドロップダウンが表示されます。if / elseステートメントを使用して.show();を使用しようとしました。しかし、それは機能していないようです。
どんな助けでもいただければ幸いです!
ありがとうございました!
オートコンプリートの提案を表示および/または非表示にするには、おそらく次のようなことをしたいと思うでしょう。
input.addEventListener('blur', function() {
$("ul.has-suggestions").hide();
})
input.addEventListener('focus', function() {
$("ul.has-suggestions").show();
})
編集:例を含むcodepen
要求された更新で2を編集します。例のあるcodepen
この2番目のcodepenは、クリックされた値をフォームフィールドに入力します。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加