具有自动完成功能的jQuery电子搜索

时间:2018-11-09 22:44:26

标签: javascript jquery

我正在使用具有jquery UI自动完成功能的电子搜索插件。我想将搜索自动完成数据复制到搜索结果单独的结果中。

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/superhero/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Live-Search-Plugin-jQuery-e-search/e-search.js"></script>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<input type="text" class="form-control search-game" placeholder="Search Game...">

<div class="container">
  <div class="row containerItems">
    <div data-filter="beroy knightmobile html accion" data-search="vampire cannon" class="col-12 col-sm-6 col-md-4" style="">
            <h4 class="card-title">Vampire Cannon</h4>
    </div>


        <div data-search="western mahjong" class="col-12 col-sm-6 col-md-4">
            <h4 class="card-title">Western Mahjong</h4>
         </div>

          <div data-search="stick freak" class="col-12 col-sm-6 col-md-4">
            <h4 class="card-title">Stick Freak</h4>
          </div>


          <div data-search="mahjong master 2 two" class="col-12 col-sm-6 col-md-4">
            <h4 class="card-title">Mahjong Master 2</h4>
          </div>

          <div data-search="7 x 7 ultimate 7x7 sevenxseven seven" class="col-12 col-sm-6 col-md-4">
            <h4 class="card-title">7 x 7 ultimate</h4>
          </div>

          <div data-search="jewel duel" class="col-12 col-sm-6 col-md-4">
            <h4 class="card-title">Jewel Duel</h4>
          </div>


     </div>
</div>

<div class="search-result">

</div>

我的脚本是

<script type="text/javascript">
           $('.search-game').search(function(){

              //execute after done typing.

      });
    </script>

    <script type="text/javascript">
      jQuery(function() {
    var availableTags = [
      "Vampire Cannon",
      "Western Mahjong",
      "Stick Freak",
      "Mahjong Master 2",
      "7 x 7 ultimate",
      "Jewel Duel",
      "ktsf"
      ];
    jQuery(".search-game").autocomplete({
      source: availableTags
    });
  } );
    </script>

我正在使用具有jQuery UI自动完成智能的电子搜索jquery插件,是否可以将搜索自动完成结果添加/复制到搜索结果div?

0 个答案:

没有答案