带有键入建议的搜索栏(动态占位符)

Question

我正在寻找一个带有动态占位符的搜索栏，类似于 https://sentifi.com。

目前，我正在使用html引导代码来创建一个简单的搜索栏：

          <div class="row">
              <BR></BR>          
              <form action="" autocomplete="off" class="form-horizontal" method="post" accept-charset="utf-8">
                    <div class="input-group">
                          <input name="searchtext" value="" class="form-control" type="text" autofocus="autofocus">
                          <span class="input-group-btn">
                              <button type="button" class="btn btn-search btn-info" id="addressSearch"> 
                                  <span class="glyphicon glyphicon-search"></span>
                                  <span class="label-icon">Search</span>
                              </button>
                          </span>
                    </div>
              </form> 
            </div>

在这方面的任何帮助/指导将不胜感激。

Answer 1

我

访问了您在问题中共享的链接，我观察到它 你需要使用 jquery 函数在搜索栏中像这样写 网站。您需要将建议保存在字符串数组中并传递 它们在占位符中一个接一个，有时间差。

Answer 2

我建议jquery ui自动完成。

它将完全满足您的需求，并且可以通过 Web 服务链接以直接从数据库中提取数据。

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

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="ui-widget">
  Start typing a coding language:
  <br/>
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

Answer 3

您可以使用 Angular js 指令来提供此类搜索栏建议。

创建这样的模板。

<input type='text' ng-model={{serachQuery}} ng-change='getResultSet()'/>
<ul>    
    <li ng-repeat="searchResults in resultSet"> 
</ul>

在控制器中编写一个函数getResultSet()然后在该函数中从输入框中获取搜索查询并对其进行一些正则表达式操作并将对象绑定到 resultSet。