スクロール可能なドロップダウンの入力フィールド

Question

ユーザーが入力フィールドに任意のフレーズを入力できるWebサイトの検索バーに取り組んでいます。ユーザーの入力に基づいて、Ajaxクエリは検索されたフレーズテキストに存在します。ユーザータイプとしては、ユーザーが最終的に選択できる場所からの結果をスクロール可能なドロップダウンを動的に作成したいと思っています。

私はdatalist要素でそれを行いましたが、私の問題はdatalistがデフォルトで結果をフィルタリングし、検索された用語で始まるレコードのみを表示することです。もちろん、すべてのブラウザがdatalistをサポートしているわけではありません。

私の質問は、これのための箱の解決策がある場合、または入力フィールドと別のドロップダウンでそれを行う必要がありますか？

私は、Googleマップが行っているのと同じ検索バーソリューションを探しています。

Answer 1

MarekTakacのおかげで、私は彼のコメントに基づいて自分の質問に答えています。同じ問題に直面している他の人には、これが便利だと思います。 jqueryui.com/autocompleteはそのトリックをしました。下に私の最終的な解決策と、それをajaxでどのように実装したかを見つけることができます。

私はこのような自分のスタイルシートファイルにそのCSSを上書きすることによって、オートコンプリートドロップダウンのルックアンドフィールをカスタマイズするために管理することができ

$("#searchboxinput").on("input",function() { 
    // Ajax only initiated if min 1 character or more entered 
    if ($(this).val().length !== 0) { 
     $.ajax({ 
      url: "/index.php?r=site%2Fajax", 
      type: "GET", 
      data: "search=" + $(this).val(), 
      success: function(data) { 
       window.$vars.markersLayer.clearLayers(); 
       var availableTags = []; 
       for (var i = 0; i < data.length; i++) { 
       if (data[i].gps) { 
        availableTags.push(data[i].name); 
        latlong = data[i].gps.split(","); 
        var ltng = []; 
        ltng.push(parseFloat(latlong[0])); 
        ltng.push(parseFloat(latlong[1])); 
        marker = L.marker(ltng).bindPopup(data[i].name); 
        window.$vars.markersLayer.addLayer(marker); 
       } 
       } 
       map.fitBounds(window.$vars.markersLayer.getBounds()); 
       $("#searchboxinput").autocomplete({ 
        source: availableTags 
       }); 
      }, 
     }); 
    } 
    // If input field is empty we have to clear the markers 
    // otherwise it would show all of them. 
    else { 
     window.$vars.markersLayer.clearLayers(); 
    } 
}); 

：

.ui-widget { 
    z-index: 1010; 
    font-family: "Lato", "Ubuntu", "Helvetica Neue", "Helvetica", "Arial", sans-serif; 
    font-size: 14px; 
} 

#ui-id-1{ 
    top: 115px !important; 
    left: 16px !important; 
    width: 359px; 
    max-height: 300px; 
    overflow-y: auto; 
    overflow-x: hidden; 
    box-shadow: 1px 2px rgba(0,0,0,0.1),0 -1px 0px rgba(0,0,0,0.01); 
} 

.ui-widget-content { 
    border: 1px solid #e4e1e1; 
} 

.ui-state-focus { 
    background: #eaeaea !important; 
    border: 0px !important; 
} 

::-webkit-scrollbar { 
    width: 8px; 
} 
::-webkit-scrollbar-button { 
    width: 8px; 
    height:5px; 
} 
::-webkit-scrollbar-track { 
    background:#FFFFFF; 
    border: thin solid #FFFFFF; 
    box-shadow: 0px 0px 3px #FFFFFF inset; 
    border-radius:0px; 
} 
::-webkit-scrollbar-thumb { 
    background: lightgray; 
    border: thin solid lightgray; 
    border-radius: 0px; 
} 
::-webkit-scrollbar-thumb:hover { 
    background: lightgray; 
}