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

最新推荐文章于 2021-06-03 20:23:59 发布

转载最新推荐文章于 2021-06-03 20:23:59 发布 · 367 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/shuai7boy/p/9911901.html

文章标签：

#ui

像我们用百度搜索打一个"你"字，就会弹出"你到底有没有爱过我"还有"你是我的小苹果" 等等，这些都是下拉框模糊匹配。那么模糊匹配下拉框是如何实现的呢? 下面我写了个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>