摘要:最近公司的項目有個需求,需要使用聯想查詢功能。效果如下圖經過搜索找到這個插件,查閱資料可以完成這個功能,即可以實現靜態數據,也可以完成動態抓取顯示。
最近公司的項目有個需求,需要使用聯想查詢功能。
就是一個文本輸入框,在輸入的時候獲取值去后端模糊查詢然后按照列表顯示在下面。
效果如下圖:
經過搜索找到這個插件,查閱資料可以完成這個功能,
即可以實現靜態數據,也可以完成動態抓取顯示。
使用方法如下:
(1)引入jquery-ui文件,當然還有jquery文件
(2)定義一個input標簽
導入代碼即可:
$(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數組格式
好了,到這里靜態和動態的數據顯示都完成了,當然為了滿足自己項目肯定少不了修改相應的樣式
修改的樣式代碼如下:
.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;}
好了,結束。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/96298.html
摘要:最近公司的項目有個需求,需要使用聯想查詢功能。效果如下圖經過搜索找到這個插件,查閱資料可以完成這個功能,即可以實現靜態數據,也可以完成動態抓取顯示。 最近公司的項目有個需求,需要使用聯想查詢功能。就是一個文本輸入框,在輸入的時候獲取值去后端模糊查詢然后按照列表顯示在下面。效果如下圖: showImg(https://segmentfault.com/img/bVbelDj?w=389&...
摘要:最近公司的項目有個需求,需要使用聯想查詢功能。效果如下圖經過搜索找到這個插件,查閱資料可以完成這個功能,即可以實現靜態數據,也可以完成動態抓取顯示。 最近公司的項目有個需求,需要使用聯想查詢功能。就是一個文本輸入框,在輸入的時候獲取值去后端模糊查詢然后按照列表顯示在下面。效果如下圖: showImg(https://segmentfault.com/img/bVbelDj?w=389&...
摘要:中交上海航道勘察設計研究院有限公司以下簡稱中交上海航道設計院是中國交通建設股份有限公司下屬,具有勘察設計研究咨詢工程總承包工程檢測造價咨詢等綜合能力的甲級設計院。隨著全球經濟一體化和產業結構的調整,我國傳統企業的國際化勢在必行,在經濟發展新時代的大背景下,我國水工領域龍頭企業-中交上海航道勘察設計研究院有限公司已經率先踐行了國際化戰略,在國際化發展道路上逐浪前行。中交上海航道勘察設計研究院有...
摘要:企業級業務聯想的機會還有多大年初,當時的全球市場老大惠普公司在中國臺灣打出了一則廣告聯想,連想都不要想,這一廣告語隨后引發軒然大波,并以惠普公司發出正式致歉信而告終。幾天前,一篇題為《假如帝國的黃昏降臨》的文章刷了屏,文中引述了橋水基金創始人Ray Dalio在新書《債務危機》中的一句話讓人印象深刻:很多人認為過去發生在不同年代,不同國家的經濟危機都是由不同的原因造成的,而我只看到了同樣一些...
摘要:聯想企業網盤版本可實現指定類型文件一鍵智能自動同步到用戶的網盤個人空間,保護用戶個人數據。在技術和產品上,聯想企業網盤始終堅持創新驅動發展。在中國企業網盤市場上,玩家類型眾多,包括IT廠商、SaaS類創業企業、互聯網廠商、企業軟件廠商和運營商,競爭激烈。既有BAT這樣的大咖,也有層出不窮的創業公司,而聯想企業網盤始終保持著穩健、快速的成長,至今連續5年占據40%的市場份額,一騎絕塵。6月19...
閱讀 1084·2021-10-08 10:04
閱讀 3523·2021-08-05 10:01
閱讀 2278·2019-08-30 11:04
閱讀 1794·2019-08-29 15:29
閱讀 836·2019-08-29 15:12
閱讀 1670·2019-08-26 12:11
閱讀 3115·2019-08-26 11:33
閱讀 1163·2019-08-26 10:23