予測テキスト検索ボックス

Question

私は、以下のcodpenで提供されている例とほぼ同じように機能する予測検索ボックスを探しています。

「California」という単語だけを予測する代わりに、予測する文字列を並べることができるように、コードを編集するにはどうすればよいですか？

また、単語が完成すると、スクリプトは入力された次の単語を予測しようとしますか？

https://codepen.io/sivarp18/pen/ewbmx

$("#search").keyup(function(){ 
 
    $("#background-input").val(''); 
 
    var city = "california"; 
 
    var searchText = $("#search").val(); 
 
    console.log(searchText.toLowerCase()); 
 
    if(searchText === "") 
 
    $("#background-input").val(''); 
 
    else if(city.indexOf(searchText.toLowerCase())==0) 
 
    { 
 
     var currentLength = searchText.length; 
 
     $("#background-input").val(searchText+""+city.substring(currentLength));  
 
    } 
 
});

#search-div 
 
{ 
 
    position: relative; 
 
} 
 
#background-input 
 
{ 
 
    position: absolute; 
 
    color: #999999; 
 
    height:25px; 
 
    width:250px; 
 
} 
 
#search 
 
{ 
 
    position: relative; 
 
    background: transparent; 
 
    height:25px; 
 
    width:250px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="search-div"> 
 
    <input type="text" id="background-input" /> 
 
    <input type="text" id="search" placeholder="Type california.." /> 
 
</div>

Answer 1

あなたは、アレイ内のあなたの都市のそれぞれをループへのあなたの場合/ else文の後に、既存のコードでループを実装する必要があり、次のコマンドを実行します配列内の各文字列のコード。

このコードは、私の作品 -

$("#search").keyup(function(){ 
    $("#background-input").val(''); 
    var cities = ["california", "london", "paris"]; 
    var searchText = $("#search").val(); 
    console.log(searchText.toLowerCase()); 

    if(searchText === "") 
    $("#background-input").val(''); 
    else { 
     for(var i = 0; i < cities.length; i++){ 
     if(cities[i].indexOf(searchText.toLowerCase())==0) 
      { 
      var currentLength = searchText.length; 
      $("#background-input").val(searchText+""+cities[i].substring(currentLength));  
     } 
    } 
    } 
});