jquery - 有没有办法在没有任何第三方插件的情况下让引导自动完成文本字段？

Question

我想创建自动建议搜索，当在文本输入字段中输入时，它会在数组中搜索并在出现的列表中显示结果，并可以选择结果。

先感谢您。

标签： jquerybootstrap-4

Answer 1

使用 jQuery 将自动完成功能组合起来非常简单。

我在 15 分钟内完成了这项工作。这有点粗糙，所以你需要根据你的要求修改它并完成它，我使用 SCSS 而不是 CSS，所以你可能也想改变它。

请看这个演示：JSFIDDLE

HTML：

<div class="autocomplete-wrapper">
    <input type="text" id="query" autocomplete="off">
    <ul id="query-results"></ul>
</div>

jQuery：

var arr = ["Martin", "James", "Jamie", "Jameson", "Jamelia", "Jamela", "StackOverflow"];

$('#query').on({
    "focus": function() {
    $(this).parent().css('border-color', '#CCCCCC');
  },
  "blur": function() {
    $(this).parent().css('border-color', '#EEEEEE');
  },
  "keyup": function() {
    var results = [];
        var val = $(this).val();
    var $queryResults = $('#query-results');
    var queryResultsMarkup = "";

    if (val.length > 1) {
            $queryResults.html("").hide();
            $.each(arr, function(i) {
                if (arr[i].match(new RegExp(val,'i'))) {
                    var $li = $('<li/>')
                        .html(arr[i])
                    .attr('data-value', arr[i]);
                $queryResults.append($li).show();
            }
        });

        $('li').on('click', function() {
            var selectedVal = $(this).attr('data-value');
            $('#query').val(selectedVal);
            $('#query-results').html("").hide();
        });
    } else {
            $queryResults.html("").hide();
    }
  }
});

CSS：

.autocomplete-wrapper {
    position: relative;
    width: 400px;
    height: 42px;
    border: solid 1px #EEE;
    padding: 5px 10px;
    font-family: 'Verdana', sans-serif;

    #query {
      height: 42px;
      padding: 0;
      margin: 0;
      width: 100%;
      border: none;
      font-size: 13px;

      &:focus {
        outline: 0;
      }
    }

    #query-results {
      display: none;
      position: absolute;
      top: 36px;
      left: -1px;
      right: -1px;
      border: solid 1px #CCC;
      min-height: 50px;
      max-height: 100px;
      overflow: scroll;
      list-style: none;
      padding: 10px;

      li {
        padding: 5px;
        margin: 0;
        font-size: 13px;

        &:hover {
          background: #EEE;
          cursor: pointer;
        }
      }
    }
}