我正在网站上的搜索栏上工作,用户可以在输入字段中输入任何短语,根据用户输入,无论搜索的短语存在于何处,Ajax查询都会返回结果列表。文本。作为用户类型,我想动态创建一个可滚动的下拉列表(因为有时候我有一大堆结果),结果来自用户最终可以选择的结果。
我使用datalist
元素进行了操作,但我的问题是datalist
默认过滤结果,只显示以搜索词开头的记录。更不用说并非所有浏览器都支持datalist
。
我的问题是,如果有任何开箱即用的解决方案,或者我必须使用输入字段和单独的下拉列表进行此操作?
为了给您一个更好的例子,我正在寻找谷歌地图正在进行的搜索栏解决方案。
答案 0 :(得分:0)
感谢MarekTakac,我根据他的评论回答了我自己的问题。希望面临同样问题的其他人会觉得这很有用。 jqueryui.com/autocomplete成功了。您可以在下面找到我的最终解决方案以及如何使用ajax实现它。
$("#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();
}
});
我可以设法通过在我自己的样式表文件中覆盖CSS来自定义自动完成下拉列表的外观和感觉,如下所示:
.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;
}