zoukankan      html  css  js  c++  java
  • Jquery AutoComplete实现搜索自动完成

    AutoComplete控件就是指用户在文本框输入前几个字母或是汉字的时候,该控件就能从存放数据的文本或是数据库里将所有以这些字母开头的数据提示给用户,供用户选择,提供方便。

    例子:

     1 <!doctype html>
     2 <html lang="en">
     3 <head>
     4   <meta charset="utf-8">
     5   <title>jQuery UI Autocomplete - Custom data and display</title>
     6   <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
     7   <script src="//code.jquery.com/jquery-1.10.2.js"></script>
     8   <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
     9   <link rel="stylesheet" href="/resources/demos/style.css">
    10   <style>
    11   #project-label {
    12     display: block;
    13     font-weight: bold;
    14     margin-bottom: 1em;
    15   }
    16   #project-icon {
    17     float: left;
    18     height: 32px;
    19      32px;
    20   }
    21   #project-description {
    22     margin: 0;
    23     padding: 0;
    24   }
    25   </style>
    26   <script>
    27   $(function() {
    28     var projects = [
    29       {
    30         value: "jquery",
    31         label: "jQuery",
    32         desc: "the write less, do more, JavaScript library",
    33         icon: "jquery_32x32.png"
    34       },
    35       {
    36         value: "jquery-ui",
    37         label: "jQuery UI",
    38         desc: "the official user interface library for jQuery",
    39         icon: "jqueryui_32x32.png"
    40       },
    41       {
    42         value: "sizzlejs",
    43         label: "Sizzle JS",
    44         desc: "a pure-JavaScript CSS selector engine",
    45         icon: "sizzlejs_32x32.png"
    46       }
    47     ];
    48  
    49     $( "#project" ).autocomplete({
    50       minLength: 0,
    51       source: projects,
    52       focus: function( event, ui ) {
    53         $( "#project" ).val( ui.item.label );
    54         return false;
    55       },
    56       select: function( event, ui ) {
    57         $( "#project" ).val( ui.item.label );
    58         $( "#project-id" ).val( ui.item.value );
    59         $( "#project-description" ).html( ui.item.desc );
    60         $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
    61  
    62         return false;
    63       }
    64     })
    65     .autocomplete( "instance" )._renderItem = function( ul, item ) {
    66       return $( "<li>" )
    67         .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
    68         .appendTo( ul );
    69     };
    70   });
    71   </script>
    72 </head>
    73 <body>
    74  
    75 <div id="project-label">Select a project (type "j" for a start):</div>
    76 <img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="">
    77 <input id="project">
    78 <input type="hidden" id="project-id">
    79 <p id="project-description"></p>
    80  
    81  
    82 </body>
    83 </html>
  • 相关阅读:
    Flexiframe在SWF中嵌入网页的组件(推荐)
    Flash as3 未在基类中找到默认的构造函数
    flex4 FLVPlayer回去弄下
    SWF 文件不能访问本地资源 只有仅限于文件系统的 SWF 文件和可信的本地 SWF 文件可以访问本地资源[转载]
    本人写的AS3中级程序员面试题
    绕开AS3安全沙箱,跨域加载SWF
    怎样去掉ApplicationControlBar的阴影
    叫你认清这个世界(for编程语言)
    资深HR八年招聘用人心得 给毕业生的实用求职建议
    本人写的AS3高级程序员面试文档(未完成)
  • 原文地址:https://www.cnblogs.com/hwgq2005/p/3976423.html
Copyright © 2011-2022 走看看