這篇文章給大家介紹的文章內容是關於怎樣使用juqery-ui完成聯想查詢的功能 ，有很好的參考價值，希望可以幫助到有需要的朋友。 最近公司的專案有個需求，需要使用聯想查詢功能。 就是一個文字輸入框，在輸入的時候取得值去後端模糊查詢然後按照列表顯示在下面。 效果如下圖： 經過搜尋找到這個插件，查閱資料可以完成這個功能，即可以實作靜態數據，也可以完成動態抓取顯示。 使用方法如下：（1）引入jquery-ui文件，當然還有jquery文件 （2）定義一個input標籤導入程式碼即可##<div class="code" style="position:relative; padding:0px; margin:0px;"><pre>$(function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "Python", "Ruby", "Scala", "Scheme" ]; $( "#tags" ).autocomplete({ source: availableTags }); });html標籤代碼接著就是透過ajax動態請求後台資料方式如下$("#xxx").autocomplete({ source: function (request, response) { $.ajax({ url: '', type: "POST", dataType: "json", data: {}, success: function (data) { that.lineData=data; response(data); } }); }, minLength: 1, scrollHeight: 1000, autoFocus: true登入後複製});後台回傳資料型別為json數組格式好了，到這裡靜態和動態的資料顯示都完成了，當然為了滿足自己項目肯定少不了修改相應的樣式修改的樣式代碼如下： <p><pre>.ui-helper-hidden-accessible {display:none;} .ui-autocomplete { position: absolute; cursor: default; border-radius: 3px; border: 1px solid #c0c0c0; } .ui-menu {list-style: none;padding: 0;margin: 0;display: block;outline: none;} .ui-menu .ui-menu-item a {text-decoration:none;display:block;padding:.2em .4em;line-height:1.5;zoom:1;} .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {background: #5897fb;border: none;color:#000;border-radius:0;font-weight: normal;} 好了，結束。 相關推薦： js和es6中常用的字串方法總結（收藏）
