JS实现模糊查询带下拉匹配效果

<!------------搜索框模糊查询带下拉匹配效果html----------------------><div class="gover_search">  <div class="gover_search_form">    <form action="#" method="post" name="searchform" id="searchform" class="searchinfo">      <ul>        <li>          <input type="text" id="tt" value="" class="text" autocomplete="off" />          <p class="search"><img src="img/search-1.png" alt=""></p>          <p class="camera"><img src="img/camera.png" alt=""></p>        </li>        <li class="searchBtns-1"><img src="img/searchBtn.png" alt=""></li>      </ul>    </form>  </div></div>

.fl {float: left;}.fr {float: right;}.clearfix:after {  content: '';  display: block;  clear: both;  visibility: hidden;  height: 0;}.clearfix { zoom: 1}.mar0 { margin: 0 auto;}.pos1 {position: relative;}input {  border: none;  outline: none;}.w100 {width: 100%;}.gover_search{ width: 420px; position: relative; border-radius: 20px; height: 42px; border: 2px solid #fb6910; background:#fff; margin-top: 50px; margin-left: 90px;}.searchinfo ul{ list-style: none;}.gover_search_form { height: 37px; width: 420px; position: relative;}/*输入框*/.searchinfo .text{ margin: 0; width: 334px; height: 38px; outline: none; vertical-align: middle; float: left; padding-left: 27px; line-height: 40px; margin-left: 16px;}/*搜索按钮*/.searchinfo .button { width: 120px; height: 40px; border: none; background-color: #4b140d; color: #fff; font-size: 19px; font-weight: bold; outline: none; float: left;}/*<!--隐藏的搜索框下拉列表-->*/.bigautocomplete-layout{ position: absolute; z-index: 999; left: 0px; max-height: 260px; overflow-y: auto; overflow-x: hidden; top: 213px !important; width: 336px !important; border: 1px solid #ccc; border-top: none; display: none; color: #004080; background-color: #fff;}.bigautocomplete-layout table{ width:336px !important;}.bigautocomplete-layout table tr{ margin-bottom:5px !important; cursor:pointer;}.bigautocomplete-layout table tr td{ height: 25px !important; width: 336px !important; padding:0 10px !important; line-height: 25px !important;}.bigautocomplete-layout table tr:hover{ background-color:#fb6910 !important; color:#fff;}.bigautocomplete-layout table tr:hover td div{ color:#fff;}.bigautocomplete-layout table tr:hover td div span{ color:#fff;}/*搜索框下拉列表关键字数量*/.keyRightSpan{ float: right; display: block; width: auto; height: 25px !important; line-height: 25px !important; padding-right:8px}.ct{ background-color: #fff;}/*关闭搜索框下拉列表按钮*/.search { width: 22px; height: 22px; position: absolute; top: 9px; left: 12px; z-index: 2;}.search img { width: 100%; height: 100%;}.camera { width: 22px; height: 22px; position: absolute; top: 9px; right: 80px; z-index: 2;}.camera img { width: 100%; height: 100%;}.searchBtn { width: 70px; height: 40px; position: absolute; top: 0px; right: 0px; z-index: 2;}.searchBtn img { width: 100%; height: 100%;}

<script src="js/jquery-3.1.1.js"></script><script src="js/index.js"></script><script src="js/jquery.bigautocomplete.js"></script>

// 隐藏的搜索框下拉列表$(function () {  var num = 0;  $("#tt").bigAutocomplete({    width: 543,    data: [{title: "牛栏山<span class='keyRightSpan'>约5个结果</span>", result: {ff: "qq"}},      {title: "郎酒<span class='keyRightSpan'>约2个结果</span>"},      {title: "茅台<span class='keyRightSpan'>约4个结果</span>"},      {title: "五粮液<span class='keyRightSpan'>约2个结果</span>"},      {title: "水井坊<span class='keyRightSpan'>约7个结果</span>"},      {title: "汾酒<span class='keyRightSpan'>约3个结果</span>"},      {title: "洋府<span class='keyRightSpan'>约2个结果</span>"},      {title: "董酒<span class='keyRightSpan'>约5个结果</span>"},      {title: "剑南春<span class='keyRightSpan'>约2个结果</span>"},      {title: "劲酒<span class='keyRightSpan'>约8个结果</span>"}],    callback: function (data) {      console.log(data.title);    }  });})