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

您可以将Angular js指令用于此类搜索栏建议。

创建这样的模板。

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

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

Answer 3

我建议jquery ui autocomplete。

它将完全满足您的需求，并可通过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>

带有输入建议的搜索栏（动态占位符）

3 个答案: