jquery.autocomplete 基本样式与使用方法

Jq.autocomplete 用法

引入JS

<script src='js/jquery.min.js?v=20220330' type='text/javascript'></script>
<script src='js/jquery.autocomplete.min.js' type='text/javascript'></script>

CSS样式

/*  //2022-03-30 AY input搜索插件  */
.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto;cursor: pointer }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }

html与js

    <input type="text" id="title" /> 
    <script>
        $("#title").autocomplete({
        serviceUrl: 'index.php?m=bug&f=ajax&action=searchTitle',
        dataType:"json",
        type:"POST",
        deferRequestBy:200,
    })
    </script>
  

PHP代码

  $queryKey = $postData->query; //获取关键字
  $searchTitleList   = "select title as value,id as data from table";//查询数据
  $data = ['query' => $queryKey,'suggestions' => $searchTitleList]; //按格式返回
  exit(json_encode($data,320));