類似百度的~搜索框下拉提示

本文轉載自查看原文 2018-11-05 22:44 1788 JqueryUI/ 前端/ 下拉框自動選擇

像我們用百度搜索打一個"你"字，就會彈出"你到底有沒有愛過我"還有"你是我的小蘋果" 等等，這些都是下拉框模糊匹配。那么模糊匹配下拉框是如何實現的呢? 下面我寫了個Demo簡單總結下:

<html>
<head>
<meta charset="utf-8">
<title>下拉框搜索匹配</title>
  <link rel="stylesheet" href="jquery-ui.css">
  <script src="jquery-1.9.1.js"></script>
  <script src="jquery-ui.js"></script>

</head>
<body>
  <div id="project-label">請輸入要搜索的內容:</div>
  <input id="project">
  <p id="project-description"></p>
</body>
</html>

<script>
$(function(){
  var projects = [
      {
        value: "你是",
        label: "你是我的眼",
        desc: "你是我的眼，帶我領略四季的變化",
        icon: "jquery_32x32.png"
      },
      {
        value: "你是",
        label: "你是我的小棉襖",
        desc: "好暖和呀~~",
        icon: "jqueryui_32x32.png"
       
      },
      {
        value: "sizzlejs",
        label: "Sizzle JS",
        desc: "a pure-JavaScript CSS selector engine"
        
      }
    ];
 
     $( "#project" ).autocomplete({
         minLength: 0,
         source: projects,
         focus: function( event, ui ) {
            $( "#project" ).val( ui.item.label );
            return false;
          },
          select: function( event, ui ) {
             $( "#project" ).val( ui.item.label );
             $( "#project-description" ).html( ui.item.desc );
        
          }
     })

})

 
 </script>

View Code

效果如下:

上面就是展示效果啦，如果您想學習更多精彩內容可以參考 JqueryUI手冊。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue實現百度搜索下拉提示功能仿百度搜索框自動下拉提示 js中實現輸入框類似百度搜索的智能提示效果借助AjaxControlToolkit實現百度搜索時的下拉列表提示模糊查詢（類似百度搜索框） jquery 實現類似百度搜索聯想功能 Jquery實現類似百度的搜索框 asp.net mvc 使用 Autocomplete 實現類似百度，谷歌動態搜索條提示框。 jqGrid的搜索框下拉模糊匹配仿百度自動下拉提示