Question

我在代码中使用了搜索框。

 <form action="/search" method="post" role="form">
 <div id="custom-search-input" style="height:41px">
 <div class="input-group col-md-12" style="height:10px">
 <input id="search" name="search" type="text" class="form-control input-lg"  
                 placeholder="Search"  style="font-size:14px;height:30px"/>
 <span class="input-group-btn">
     <button class="btn btn-info btn-lg" type="submit">
   <i class="glyphicon glyphicon-search" style="text-decoration:none"></i>
        </button>
         </span>
         </div>
  <div><label id="noresult"><i>No results found</i></label>
  </div>
   </div>
   </form>

现在我想向这个搜索框添加自动建议，就像你写“a”一样，它开始显示以“a”开头的所有内容，就像google一样。这些建议可以从包含每个可能结果的列表中加载搜索。

请帮我讲解如何添加此功能。

Answer 1

仅使用HTML，您无法执行此操作。

您必须使用javascript。

以下是使用jquery的解决方案。

<强> HTML

<input type="text" id="selector">

<强> JS

var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Cycle",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"];
$("#selector").autocomplete({
    source: availableTags
});

$('#selector').change(function () {
    alert($('#selector').val());
});

在使用此功能之前，您必须添加jquery和jquery-ui。

<强> Demo here

如何在引导搜索框中的单词列表中添加建议

1 个答案: