Question

我正在网站上的搜索栏上工作，用户可以在输入字段中输入任何短语，根据用户输入，无论搜索的短语存在于何处，Ajax查询都会返回结果列表。文本。作为用户类型，我想动态创建一个可滚动的下拉列表（因为有时候我有一大堆结果），结果来自用户最终可以选择的结果。

我使用datalist元素进行了操作，但我的问题是datalist默认过滤结果，只显示以搜索词开头的记录。更不用说并非所有浏览器都支持datalist。

我的问题是，如果有任何开箱即用的解决方案，或者我必须使用输入字段和单独的下拉列表进行此操作？

为了给您一个更好的例子，我正在寻找谷歌地图正在进行的搜索栏解决方案。

Answer 1

感谢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;
}

带可滚动下拉列表的输入字段

1 个答案: