使用 javaScript 從搜索欄上的項目建議列表中選擇一個答案

Question

輸入單詞后，我創建了一個帶有元素建議的搜索欄。 我希望在顯示建議列表后，我可以點擊結果並將其定位在輸入上。

腳本.js

const articles = [
{name:'matoss'},
{name:'solution'},
{name:'moloss'},
{name:'KARKAN'}
];

const rechercheInput=document.getElementById('rechercheInput');
rechercheInput.addEventListener('keyup',function(){
const input = rechercheInput.value;
const result = 
articles.filter(item=>item.name.toLocaleLowerCase().includes(input.toLocaleLowerCase()));
let suggestion ='';

if(input != ''){
    result.forEach(resultItem =>
        suggestion += `<div class="suggestion">${resultItem.name}</div>`
        )
}
document.getElementById('suggestions').innerHTML=suggestion;
})

索引.html

<form method="get" action="">
   <input type="search" name="recherche" placeholder="code article.." id="rechercheInput" 
required>
   <div id="suggestions"></div>
   <button class="btn waves-effect waves-light" type="submit">Recherche
   <i class="material-icons right">search</i>
   </button>
</form> 

Answer 1

以下代碼段完全按照您使用 JavaScript 描述的方式執行。

 const articles = [{ name: 'matoss' }, { name: 'solution' }, { name: 'moloss' }, { name: 'KARKAN' } ]; // DOM element handles const input = document.getElementById('rechercheInput') const suggestions = document.getElementById('suggestions') const submitBtn = document.getElementById('submit') // handling form submit submitBtn.addEventListener('click', function(e) { e.preventDefault() // only for the snippet - you might not need this }) // utils const toLowerCase = (s) => s.toLowerCase() const strIncludes = (s1) => (s2) => s1.includes(s2) const filterByName = (val) => ({ name }) => strIncludes(toLowerCase(name))(toLowerCase(val)) // emptying a DOM element (#suggestions) const empty = (element) => { while (element.firstElementChild) { element.firstElementChild.remove(); } } // getting the items from the possible articles const getFilteredArray = (arr) => (keyword) => keyword? arr.filter(filterByName(keyword)): [] const getFilteredArticles = getFilteredArray(articles) // input event handler input.addEventListener('input', function(e) { const filteredArticles = getFilteredArticles(e.target.value) updateSuggestions(suggestions, this)(filteredArticles) }) // creating suggestion item DOM element const getSuggestionItemEl = (suggestion) => { const suggestionItem = document.createElement('div') suggestionItem.classList.add('suggestion-item') suggestionItem.textContent = suggestion.name return { suggestionItem, } } // base for handling click on suggestion items const getListenerFn = (input, article, callback) => (e) => { input.value = article.name if (callback && callback instanceof Function) { // if a callback function is defined, then it's called with // the following args callback(input) } } // updating the suggestions list const updateSuggestions = (container, input) => (filteredArticles) => { // 1. emptying the container empty(container) // 2. generating the DOM elements; adding click handler; // adding generated elements to the container (#suggestions) filteredArticles.forEach((article) => { const { suggestionItem } = getSuggestionItemEl(article) suggestionItem.addEventListener('click', getListenerFn(input, article, (input) => updateSuggestions(container, input)(getFilteredArticles(input.value)))) container.append(suggestionItem) }) }

 .suggestion-item { cursor: pointer; transition: all 0.4s; }.suggestion-item:hover { background-color: rgba(0, 0, 0, 0.3); transition: all 0.2s; }

 <form method="get" action=""> <input type="search" name="recherche" placeholder="code article.." id="rechercheInput" required> <button id="submit" class="btn waves-effect waves-light" type="submit">Recherche <i class="material-icons right">search</i> </button> <div id="suggestions"></div> </form>