JQuery easyui里面的自动完成autocomplete插件

最新推荐文章于 2023-07-04 15:13:37 发布
最新推荐文章于 2023-07-04 15:13:37 发布
阅读量498 收藏
点赞数
文章标签： ui javascript php ViewUI
原文链接：http://www.cnblogs.com/yj716716yj/p/5640187.html
版权

默认功能

当您在输入域中输入时，自动完成（Autocomplete）部件提供相应的建议。在本实例中，提供了编程语言的建议选项，您可以输入 "ja" 尝试一下，可以得到 Java 或 JavaScript。

数据源是一个简单的 JavaScript 数组，使用 source 选项提供给部件。

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 自动完成（Autocomplete） - 默认功能</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });
  </script>
</head>
<body>
  
<div class="ui-widget">
  <label for="tags">标签：</label>
  <input id="tags">
</div>
  
  
</body>
</html>


autocomplete 域使用自定义的 source 选项来匹配带有重音字符的结果项，即使文本域不包含重音字符也会匹配。但是如果您在文本域中键入了重音字符，则不会显示非重音的结果项。包含重音

尝试键入 "Jo"，会看到 "John" 和 "Jörn"，然后 键入 "Jö"，只会看到 "Jörn"。

<!doctype html>

< html  lang = "en" >
< head >
   < meta  charset = "utf-8" >
   < title >jQuery UI 自动完成（Autocomplete） - 包含重音</ title >
   < link  rel = "stylesheet"  href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" >
   < script  src = "//code.jquery.com/jquery-1.9.1.js" ></ script >
   < script  src = "//code.jquery.com/ui/1.10.4/jquery-ui.js" ></ script >
   < link  rel = "stylesheet"  href = "http://jqueryui.com/resources/demos/style.css" >
   < script >
   $(function() {
     var names = [ "Jörn Zaefferer", "Scott González", "John Resig" ];
  
     var accentMap = {
       "á": "a",
       "ö": "o"
     };
     var normalize = function( term ) {
       var ret = "";
       for ( var i = 0; i <  term.length ; i++ ) {
         ret += accentMap[ term.charAt(i) ] || term.charAt(i);
       }
       return ret;
     };
  
     $( "#developer" ).autocomplete({
       source: function( request, response ) {
         var  matcher  =  new  RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
         response( $.grep( names, function( value ) {
           value  = value.label || value.value || value;
           return matcher.test( value ) || matcher.test( normalize( value ) );
         }) );
       }
     });
   });
   </script>
</ head >
< body >
  
< div  class = "ui-widget" >
   < form >
   < label  for = "developer" >开发人员：</ label >
   < input  id = "developer" >
   </ form >
</ div>
</ body >
</ html >

分类

分类的搜索结果。尝试键入 "a" 或 "n"。

<!doctype html>

< html  lang = "en" >
< head >
   < meta  charset = "utf-8" >
   < title >jQuery UI 自动完成（Autocomplete） - 分类</ title >
   < link  rel = "stylesheet"  href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" >
   < script  src = "//code.jquery.com/jquery-1.9.1.js" ></ script >
   < script  src = "//code.jquery.com/ui/1.10.4/jquery-ui.js" ></ script >
   < link  rel = "stylesheet"  href = "http://jqueryui.com/resources/demos/style.css" >
   < style >
   .ui-autocomplete-category {
     font-weight: bold;
     padding: .2em .4em;
     margin: .8em 0 .2em;
     line-height: 1.5;
   }
   </ style >
   < script >
   $.widget( "custom.catcomplete", $.ui.autocomplete, {
     _renderMenu: function( ul, items ) {
       var that = this,
         currentCategory = "";
       $.each( items, function( index, item ) {
         if ( item.category != currentCategory ) {
           ul.append( "< li  class = 'ui-autocomplete-category' >" + item.category + "</ li >" );
           currentCategory = item.category;
         }
         that._renderItemData( ul, item );
       });
     }
   });
   </ script >
   < script >
   $(function() {
     var data = [
       { label: "anders", category: "" },
       { label: "andreas", category: "" },
       { label: "antal", category: "" },
       { label: "annhhx10", category: "Products" },
       { label: "annk K12", category: "Products" },
       { label: "annttop C13", category: "Products" },
       { label: "anders andersson", category: "People" },
       { label: "andreas andersson", category: "People" },
       { label: "andreas johnson", category: "People" }
     ];
  
     $( "#search" ).catcomplete({
       delay: 0,
       source: data
     });
   });
   </ script >
</ head >
< body >
  
< label  for = "search" >搜索：</ label >
< input  id = "search" >
</ body >
</ html >

 

组合框（Combobox）

一个由 Autocomplete 和 Button 创建的自定义部件。您可以键入一些字符，来获得基于您的输入过滤的结果，或者使用按钮从完整列表中选择。

该输入是从一个已有的 select 元素中读取，传递给带有自定义的 source 选项的 Autocomplete。

这是一个不被支持的不完美的部件。这里纯粹是为了演示 autocomplete 定制功能。如需了解更多有关该部件工作原理的细节，请点击这里查看相关的 jQuery 文章。

<!doctype html>

< html  lang = "en" >
< head >
   < meta  charset = "utf-8" >
   < title >jQuery UI 自动完成（Autocomplete） - 组合框（Combobox）</ title >
   < link  rel = "stylesheet"  href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" >
   < script  src = "//code.jquery.com/jquery-1.9.1.js" ></ script >
   < script  src = "//code.jquery.com/ui/1.10.4/jquery-ui.js" ></ script >
   < link  rel = "stylesheet"  href = "http://jqueryui.com/resources/demos/style.css" >
   < style >
   .custom-combobox {
     position: relative;
     display: inline-block;
   }
   .custom-combobox-toggle {
     position: absolute;
     top: 0;
     bottom: 0;
     margin-left: -1px;
     padding: 0;
     /* 支持： IE7 */
     *height: 1.7em;
     *top: 0.1em;
   }
   .custom-combobox-input {
     margin: 0;
     padding: 0.3em;
   }
   </ style >
   < script >
   (function( $ ) {
     $.widget( "custom.combobox", {
       _create: function() {
         this.wrapper = $( "< span >" )
           .addClass( "custom-combobox" )
           .insertAfter( this.element );
  
         this.element.hide();
         this._createAutocomplete();
         this._createShowAllButton();
       },
  
       _createAutocomplete: function() {
         var selected = this.element.children( ":selected" ),
           value = selected.val() ? selected.text() : "";
  
         this.input = $( "< input >" )
           .appendTo( this.wrapper )
           .val( value )
           .attr( "title", "" )
           .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
           .autocomplete({
             delay: 0,
             minLength: 0,
             source: $.proxy( this, "_source" )
           })
           .tooltip({
             tooltipClass: "ui-state-highlight"
           });
  
         this._on( this.input, {
           autocompleteselect: function( event, ui ) {
             ui.item.option.selected = true;
             this._trigger( "select", event, {
               item: ui.item.option
             });
           },
  
           autocompletechange: "_removeIfInvalid"
         });
       },
  
       _createShowAllButton: function() {
         var input = this.input,
           wasOpen = false;
  
         $( "< a >" )
           .attr( "tabIndex", -1 )
           .attr( "title", "Show All Items" )
           .tooltip()
           .appendTo( this.wrapper )
           .button({
             icons: {
               primary: "ui-icon-triangle-1-s"
             },
             text: false
           })
           .removeClass( "ui-corner-all" )
           .addClass( "custom-combobox-toggle ui-corner-right" )
           .mousedown(function() {
             wasOpen = input.autocomplete( "widget" ).is( ":visible" );
           })
           .click(function() {
             input.focus();
  
             // 如果已经可见则关闭
             if ( wasOpen ) {
               return;
             }
  
             // 传递空字符串作为搜索的值，显示所有的结果
             input.autocomplete( "search", "" );
           });
       },
  
       _source: function( request, response ) {
         var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
         response( this.element.children( "option" ).map(function() {
           var text = $( this ).text();
           if ( this.value && ( !request.term || matcher.test(text) ) )
             return {
               label: text,
               value: text,
               option: this
             };
         }) );
       },
  
       _removeIfInvalid: function( event, ui ) {
  
         // 选择一项，不执行其他动作
         if ( ui.item ) {
           return;
         }
  
         // 搜索一个匹配（不区分大小写）
         var value = this.input.val(),
           valueLowerCase = value.toLowerCase(),
           valid = false;
         this.element.children( "option" ).each(function() {
           if ( $( this ).text().toLowerCase() === valueLowerCase ) {
             this.selected = valid = true;
             return false;
           }
         });
  
         // 找到一个匹配，不执行其他动作
         if ( valid ) {
           return;
         }
  
         // 移除无效的值
         this.input
           .val( "" )
           .attr( "title", value + " didn't match any item" )
           .tooltip( "open" );
         this.element.val( "" );
         this._delay(function() {
           this.input.tooltip( "close" ).attr( "title", "" );
         }, 2500 );
         this.input.data( "ui-autocomplete" ).term = "";
       },
  
       _destroy: function() {
         this.wrapper.remove();
         this.element.show();
       }
     });
   })( jQuery );
  
   $(function() {
     $( "#combobox" ).combobox();
     $( "#toggle" ).click(function() {
       $( "#combobox" ).toggle();
     });
   });
   </ script >
</ head >
< body >
  
< div  class = "ui-widget" >
   < label >您喜欢的编程语言：</ label >
   < select  id = "combobox" >
     < option  value = "" >请选择...</ option >
     < option  value = "ActionScript" >ActionScript</ option >
     < option  value = "AppleScript" >AppleScript</ option >
     < option  value = "Asp" >Asp</ option >
     < option  value = "BASIC" >BASIC</ option >
     < option  value = "C" >C</ option >
     < option  value = "C++" >C++</ option >
     < option  value = "Clojure" >Clojure</ option >
     < option  value = "COBOL" >COBOL</ option >
     < option  value = "ColdFusion" >ColdFusion</ option >
     < option  value = "Erlang" >Erlang</ option >
     < option  value = "Fortran" >Fortran</ option >
     < option  value = "Groovy" >Groovy</ option >
     < option  value = "Haskell" >Haskell</ option >
     < option  value = "Java" >Java</ option >
     < option  value = "JavaScript" >JavaScript</ option >
     < option  value = "Lisp" >Lisp</ option >
     < option  value = "Perl" >Perl</ option >
     < option  value = "PHP" >PHP</ option >
     < option  value = "Python" >Python</ option >
     < option  value = "Ruby" >Ruby</ option >
     < option  value = "Scala" >Scala</ option >
     < option  value = "Scheme" >Scheme</ option >
   </ select >
</ div >
< button  id = "toggle" >显示基础的选择框</ button >
</ body >
</ html >

 

自定义数据并显示

您可以使用自定义数据格式，并通过简单地重载默认的聚焦和选择行为来显示数据。

尝试键入 "j"，或者按向下箭头按键，即可得到一个项目列表。

<!doctype html>

< html  lang = "en" >
< head >
   < meta  charset = "utf-8" >
   < title >jQuery UI 自动完成（Autocomplete） - 自定义数据并显示</ title >
   < link  rel = "stylesheet"  href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" >
   < script  src = "//code.jquery.com/jquery-1.9.1.js" ></ script >
   < script  src = "//code.jquery.com/ui/1.10.4/jquery-ui.js" ></ script >
   < link  rel = "stylesheet"  href = "http://jqueryui.com/resources/demos/style.css" >
   < style >
   #project-label {
     display: block;
     font-weight: bold;
     margin-bottom: 1em;
   }
   #project-icon {
     float: left;
     height: 32px;
     width: 32px;
   }
   #project-description {
     margin: 0;
     padding: 0;
   }
   </ style >
   < script >
   $(function() {
     var projects = [
       {
         value: "jquery",
         label: "jQuery",
         desc: "the write less, do more, JavaScript library",
         icon: "jquery_32x32.png"
       },
       {
         value: "jquery-ui",
         label: "jQuery UI",
         desc: "the official user interface library for jQuery",
         icon: "jqueryui_32x32.png"
       },
       {
         value: "sizzlejs",
         label: "Sizzle JS",
         desc: "a pure-JavaScript CSS selector engine",
         icon: "sizzlejs_32x32.png"
       }
     ];
  
     $( "#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-id" ).val( ui.item.value );
         $( "#project-description" ).html( ui.item.desc );
         $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
  
         return false;
       }
     })
     .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
       return $( "< li >" )
         .append( "< a >" + item.label + "< br >" + item.desc + "</ a >" )
         .appendTo( ul );
     };
   });
   </ script >
</ head >
< body >
  
< div  id = "project-label" >选择一个项目（请键入 "j"）：</ div >
< img  id = "project-icon"  src = "images/transparent_1x1.png"  class = "ui-state-default"  alt = "" >
< input  id = "project" >
< input  type = "hidden"  id = "project-id" >
< p  id = "project-description" ></ p >
</ body >
</ html >

多个值

用法：键入一些字符，比如 "j"，可以看到相关的编程语言结果。选择一个值，然后继续键入字符来添加其他的值。

本实例演示如何使用 source 选项和一些事件来实现在一个单一的文本域输入多个自动完成的值。

<!doctype html>

< html  lang = "en" >
< head >
   < meta  charset = "utf-8" >
   < title >jQuery UI 自动完成（Autocomplete） - 多个值</ title >
   < link  rel = "stylesheet"  href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" >
   < script  src = "//code.jquery.com/jquery-1.9.1.js" ></ script >
   < script  src = "//code.jquery.com/ui/1.10.4/jquery-ui.js" ></ script >
   < link  rel = "stylesheet"  href = "http://jqueryui.com/resources/demos/style.css" >
   < script >
   $(function() {
     var availableTags = [
       "ActionScript",
       "AppleScript",
       "Asp",
       "BASIC",
       "C",
       "C++",
       "Clojure",
       "COBOL",
       "ColdFusion",
       "Erlang",
       "Fortran",
       "Groovy",
       "Haskell",
       "Java",
       "JavaScript",
       "Lisp",
       "Perl",
       "PHP",
       "Python",
       "Ruby",
       "Scala",
       "Scheme"
     ];
     function split( val ) {
       return val.split( /,\s*/ );
     }
     function extractLast( term ) {
       return split( term ).pop();
     }
  
     $( "#tags" )
       // 当选择一个条目时不离开文本域
       .bind( "keydown", function( event ) {
         if ( event.keyCode === $.ui.keyCode.TAB &&
             $( this ).data( "ui-autocomplete" ).menu.active ) {
           event.preventDefault();
         }
       })
       .autocomplete({
         minLength: 0,
         source: function( request, response ) {
           // 回到 autocomplete，但是提取最后的条目
           response( $.ui.autocomplete.filter(
             availableTags, extractLast( request.term ) ) );
         },
         focus: function() {
           // 防止在获得焦点时插入值
           return false;
         },
         select: function( event, ui ) {
           var terms = split( this.value );
           // 移除当前输入
           terms.pop();
           // 添加被选项
           terms.push( ui.item.value );
           // 添加占位符，在结尾添加逗号+空格
           terms.push( "" );
           this.value = terms.join( ", " );
           return false;
         }
       });
   });
   </ script >
</ head >
< body >
  
< div  class = "ui-widget" >
   < label  for = "tags" >编程语言：</ label >
   < input  id = "tags"  size = "50" >
</ div >
  
  
</ body >
</ html >

多个值，远程

用法：键入至少两个字符来获取鸟的名称。选择一个值，然后继续键入字符来添加其他的值。

本实例演示如何使用 source 选项和一些事件来实现在一个单一的文本域输入多个自动完成的值。

<!doctype html>

< html  lang = "en" >
< head >
   < meta  charset = "utf-8" >
   < title >jQuery UI 自动完成（Autocomplete） - 多个值，远程</ title >
   < link  rel = "stylesheet"  href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" >
   < script  src = "//code.jquery.com/jquery-1.9.1.js" ></ script >
   < script  src = "//code.jquery.com/ui/1.10.4/jquery-ui.js" ></ script >
   < link  rel = "stylesheet"  href = "http://jqueryui.com/resources/demos/style.css" >
   < style >
   .ui-autocomplete-loading {
     background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
   }
   </ style >
   < script >
   $(function() {
     function split( val ) {
       return val.split( /,\s*/ );
     }
     function extractLast( term ) {
       return split( term ).pop();
     }
  
     $( "#birds" )
       // 当选择一个条目时不离开文本域
       .bind( "keydown", function( event ) {
         if ( event.keyCode === $.ui.keyCode.TAB &&
             $( this ).data( "ui-autocomplete" ).menu.active ) {
           event.preventDefault();
         }
       })
       .autocomplete({
         source: function( request, response ) {
           $.getJSON( "search.php", {
             term: extractLast( request.term )
           }, response );
         },
         search: function() {
           // 自定义最小长度
           var term = extractLast( this.value );
           if ( term.length <  2  ) {
             return false;
           }
         },
         focus: function() {
           // 防止在获得焦点时插入值
           return false;
         },
         select: function( event, ui ) {
           var  terms  =  split ( this.value );
           // 移除当前输入
           terms.pop();
           // 添加被选项
           terms.push( ui.item.value );
           // 添加占位符，在结尾添加逗号+空格
           terms.push( "" );
           this.value  =  terms .join( ", " );
           return false;
         }
       });
   });
   </script>
</ head >
< body >
  
< div  class = "ui-widget" >
   < label  for = "birds" >鸟：</ label >
   < input  id = "birds"  size = "50" >
</ div >    
</ body >
</ html >
 

远程 JSONP 数据源

当您在文本域中键入字符时，Autocomplete 部件给出建议结果。在本实例中，当您在文本域中至少键入两个字符时，将显示相关城市的名称。

在本实例中，数据源是 geonames.org webservice。虽然选择一个元素后文本域中是该城市名称，但是会显示更多的信息以便找到正确的条目。数据也可以回调，显示在下面的结果框中。

<!doctype html>

< html  lang = "en" >
< head >
   < meta  charset = "utf-8" >
   < title >jQuery UI 自动完成（Autocomplete） - 远程 JSONP 数据源</ title >
   < link  rel = "stylesheet"  href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" >
   < script  src = "//code.jquery.com/jquery-1.9.1.js" ></ script >
   < script  src = "//code.jquery.com/ui/1.10.4/jquery-ui.js" ></ script >
   < link  rel = "stylesheet"  href = "http://jqueryui.com/resources/demos/style.css" >
   < style >
   .ui-autocomplete-loading {
     background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
   }
   #city { width: 25em; }
   </ style >
   < script >
   $(function() {
     function log( message ) {
       $( "< div >" ).text( message ).prependTo( "#log" );
       $( "#log" ).scrollTop( 0 );
     }
  
     $( "#city" ).autocomplete({
       source: function( request, response ) {
         $.ajax({
           url: "http://ws.geonames.org/searchJSON",
           dataType: "jsonp",
           data: {
             featureClass: "P",
             style: "full",
             maxRows: 12,
             name_startsWith: request.term
           },
           success: function( data ) {
             response( $.map( data.geonames, function( item ) {
               return {
                 label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                 value: item.name
               }
             }));
           }
         });
       },
       minLength: 2,
       select: function( event, ui ) {
         log( ui.item ?
           "Selected: " + ui.item.label :
           "Nothing selected, input was " + this.value);
       },
       open: function() {
         $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
       },
       close: function() {
         $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
       }
     });
   });
   </ script >
</ head >
< body >
  
< div  class = "ui-widget" >
   < label  for = "city" >您的城市：</ label >
   < input  id = "city" >
   Powered by < a  href = "http://geonames.org"  target = "_blank" >geonames.org</ a >
</ div >
  
< div  class = "ui-widget"  style = "margin-top:2em; font-family:Arial" >
   结果：
   < div  id = "log"  style = "height: 200px; width: 300px; overflow: auto;"  class = "ui-widget-content" ></ div >
</ div >    
</ body >
</ html >
 

远程数据源

当您在文本域中键入字符时，Autocomplete 部件给出建议结果。在本实例中，当您在文本域中至少键入两个字符时，将显示相关鸟的名称。

在本实例中，数据源是可返回 JSON 数据的服务器端脚本，通过一个简单的 source 选项来指定。另外，minLength 选项设置为 2，避免查询返回太多的结果，select 事件用于显示一些反馈。

<!doctype html>

< html  lang = "en" >
< head >
   < meta  charset = "utf-8" >
   < title >jQuery UI 自动完成（Autocomplete） - 远程数据源</ title >
   < link  rel = "stylesheet"  href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" >
   < script  src = "//code.jquery.com/jquery-1.9.1.js" ></ script >
   < script  src = "//code.jquery.com/ui/1.10.4/jquery-ui.js" ></ script >
   < link  rel = "stylesheet"  href = "http://jqueryui.com/resources/demos/style.css" >
   < style >
   .ui-autocomplete-loading {
     background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
   }
   </ style >
   < script >
   $(function() {
     function log( message ) {
       $( "< div >" ).text( message ).prependTo( "#log" );
       $( "#log" ).scrollTop( 0 );
     }
  
     $( "#birds" ).autocomplete({
       source: "search.php",
       minLength: 2,
       select: function( event, ui ) {
         log( ui.item ?
           "Selected: " + ui.item.value + " aka " + ui.item.id :
           "Nothing selected, input was " + this.value );
       }
     });
   });
   </ script >
</ head >
< body >
  
< div  class = "ui-widget" >
   < label  for = "birds" >鸟：</ label >
   < input  id = "birds" >
</ div >
  
< div  class = "ui-widget"  style = "margin-top:2em; font-family:Arial" >
   结果：
   < div  id = "log"  style = "height: 200px; width: 300px; overflow: auto;"  class = "ui-widget-content" ></ div >
</ div >    
</ body >
</ html >
 

远程缓存

当您在文本域中键入字符时，Autocomplete 部件给出建议结果。在本实例中，当您在文本域中至少键入两个字符时，将显示相关鸟的名称。

为了提高性能，这里添加了一些本地缓存，其他与远程数据源实例相似。在这里，缓存只保存了一个查询，并可以扩展到缓存多个值，每个条目一个值。

<!doctype html>

< html  lang = "en" >
< head >
   < meta  charset = "utf-8" >
   < title >jQuery UI 自动完成（Autocomplete） - 远程缓存</ title >
   < link  rel = "stylesheet"  href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" >
   < script  src = "//code.jquery.com/jquery-1.9.1.js" ></ script >
   < script  src = "//code.jquery.com/ui/1.10.4/jquery-ui.js" ></ script >
   < link  rel = "stylesheet"  href = "http://jqueryui.com/resources/demos/style.css" >
   < style >
   .ui-autocomplete-loading {
     background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
   }
   </ style >
   < script >
   $(function() {
     var cache = {};
     $( "#birds" ).autocomplete({
       minLength: 2,
       source: function( request, response ) {
         var term = request.term;
         if ( term in cache ) {
           response( cache[ term ] );
           return;
         }
  
         $.getJSON( "search.php", request, function( data, status, xhr ) {
           cache[ term ] = data;
           response( data );
         });
       }
     });
   });
   </ script >
</ head >
< body >
  
< div  class = "ui-widget" >
   < label  for = "birds" >鸟：</ label >
   < input  id = "birds" >
</ div >
</ body >
</ html >
 

可滚动的结果

当显示一个长列表的选项时，您可以简单地为 autocomplete 菜单设置 max-height 来防止菜单显示太长。尝试键入 "a" 或 "s" 来获得一个可滚动的长列表的结果。

<!doctype html>

< html  lang = "en" >
< head >
   < meta  charset = "utf-8" >
   < title >jQuery UI 自动完成（Autocomplete） - 可滚动的结果</ title >
   < link  rel = "stylesheet"  href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" >
   < script  src = "//code.jquery.com/jquery-1.9.1.js" ></ script >
   < script  src = "//code.jquery.com/ui/1.10.4/jquery-ui.js" ></ script >
   < link  rel = "stylesheet"  href = "http://jqueryui.com/resources/demos/style.css" >
   < style >
   .ui-autocomplete {
     max-height: 100px;
     overflow-y: auto;
     /* 防止水平滚动条 */
     overflow-x: hidden;
   }
   /* IE 6 不支持 max-height
    * 我们使用 height 代替，但是这会强制菜单总是显示为那个高度
    */
   * html .ui-autocomplete {
     height: 100px;
   }
   </ style >
   < script >
   $(function() {
     var availableTags = [
       "ActionScript",
       "AppleScript",
       "Asp",
       "BASIC",
       "C",
       "C++",
       "Clojure",
       "COBOL",
       "ColdFusion",
       "Erlang",
       "Fortran",
       "Groovy",
       "Haskell",
       "Java",
       "JavaScript",
       "Lisp",
       "Perl",
       "PHP",
       "Python",
       "Ruby",
       "Scala",
       "Scheme"
     ];
     $( "#tags" ).autocomplete({
       source: availableTags
     });
   });
   </ script >
</ head >
< body >
  
< div  class = "ui-widget" >
   < label  for = "tags" >标签：</ label >
   < input  id = "tags" >
</ div >    
</ body >
</ html >
 

XML 数据

本实例演示如何获取一些 XML 数据，并使用 jQuery 的方法解析它，然后把它提供给 autocomplete 作为数据源。

本实例也可作为解析远程 XML 数据源的参考 - 解析在每次 source 回调请求时发生。

<!doctype html>

< html  lang = "en" >
< head >
   < meta  charset = "utf-8" >
   < title >jQuery UI 自动完成（Autocomplete） - XML 数据</ title >
   < link  rel = "stylesheet"  href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" >
   < script  src = "//code.jquery.com/jquery-1.9.1.js" ></ script >
   < script  src = "//code.jquery.com/ui/1.10.4/jquery-ui.js" ></ script >
   < link  rel = "stylesheet"  href = "http://jqueryui.com/resources/demos/style.css" >
   < style >
   .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
   </ style >
   < script >
   $(function() {
     function log( message ) {
       $( "< div />" ).text( message ).prependTo( "#log" );
       $( "#log" ).attr( "scrollTop", 0 );
     }
  
     $.ajax({
       url: "london.xml",
       dataType: "xml",
       success: function( xmlResponse ) {
         var data = $( "geoname", xmlResponse ).map(function() {
           return {
             value: $( "name", this ).text() + ", " +
               ( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ),
             id: $( "geonameId", this ).text()
           };
         }).get();
         $( "#birds" ).autocomplete({
           source: data,
           minLength: 0,
           select: function( event, ui ) {
             log( ui.item ?
               "Selected: " + ui.item.value + ", geonameId: " + ui.item.id :
               "Nothing selected, input was " + this.value );
           }
         });
       }
     });
   });
   </ script >
</ head >
< body >
  
< div  class = "ui-widget" >
   < label  for = "birds" >London 匹配：</ label >
   < input  id = "birds" >
</ div >
  
< div  class = "ui-widget"  style = "margin-top:2em; font-family:Arial" >
   结果：
   < div  id = "log"  style = "height: 200px; width: 300px; overflow: auto;"  class = "ui-widget-content" ></ div >
</ div >
</ body >
</ html >

转载于:https://www.cnblogs.com/yj716716yj/p/5640187.html

atoqkolgpvlif6615
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
自动完成包--完整
09-03
1. JavaScript文件：可能包含自定义的AutoComplete插件代码，以及修复EasyUI冲突的逻辑。 2. CSS文件：可能用于定制自动完成组件的样式，使其与EasyUI的样式相协调。 3. HTML文件：可能包含演示如何使用这个修复包的...
jQuery UI 实例 - 自动完成（Autocomplete）
unber的博客
04-08 842
jQuery UI 自动完成（Autocomplete） - 自定义数据并显示
解决easyui-textbox 组件autocomplete=“on“不生效
最新发布
Griner_的博客
07-04 375
解决easyui-textbox 组件autocomplete="on"不生效问题
jQuery UI Autocomplete 体验
weixin_34132768的博客
02-12 141
  原文:http://www.cnblogs.com/lwme/archive/2012/02/12/jquery-ui-autocomplete.html jQuery UI Autocomplete是jQuery UI的自动完成组件，是我用过的最强大、最灵活的Autocomplete，它支持本地的Array/JSON数组、通过ajax请求的Array/JSON数组、JSONP、以...
jqueryui之autocomplete
zccst的专栏
05-14 185
作者：zccst（转） JQuery UI 是以 JQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件，这些控件主要包括：Accordion,Autocomplete,ColorPicker,Dialog,Slider,Tabs,DatePicker,Magnifier,ProgressBar,Spinner等，...
jQuery 插件仿百度搜索框智能提示(带Value值)
12-10
$.fn.autoComplete = function(config) { c = $(this); var defaults = { width: c.width(), //提示框的宽度 默认跟文本框一样 maxheight: 150, //提示框的最大高度 top: 6, //与文本框的上下距离 u
JqueryUi插件
07-04
6. **Autocomplete（自动完成）**：在用户输入时提供匹配的建议，常见于搜索框或表单输入。 ### 集成与应用 1. **下载与引入**：可以从官方网站下载jQuery UI压缩包，如`jquery-easyui-1.3.2`，解压后将所需的...
jQuery插件
08-28
5. **jquery.autocomplete.zip**：这个插件提供了自动完成功能，常用于搜索输入框，当用户开始输入时，会自动显示匹配的建议列表。 6. **jquery-easyui-1.0.5.zip**：EasyUI是基于jQuery的一个轻量级的前端框架，它...
jqueryUI插件
05-28
标题中的“自动输入然后会自动检索”指的是jQuery UI的Autocomplete组件。这个功能允许用户在输入框中输入时，系统会根据已有的数据集自动显示匹配项，提高输入效率。开发者可以通过设置数据源，比如JSON或XML，来...
jqueryui实现百度推荐搜索功能
rrz634171的专栏
04-29 1395
使用的是get提交方式 .jsp 百度搜索： $(function() {         $("#txtSearchKey").autocomplete(         {             source: function(request, response) {                 $.ajax({
autocomplete及Ajax,[easyUI] autocomplete 简单自动完成以及ajax从服务器端完成
weixin_39992199的博客
08-06 514
通过id取input标签对象,调用autocomplete方法var sources = ["ActionScript","AppleScript","Asp","COBOL","ColdFusion","Erlang","Fortran","Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP","Python","Ruby","Sca...
JQuery UI的Autocomplete用法
shensuqiao的专栏
10-22 188
1.下拉框中出现的是包含当前输入字母的元素     例如：当输入C时，会出现C++，coldfusion和javascript的可选项 &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;autocomplete demo&amp
jQuery-ui-autocomplete
weixin_34293902的博客
11-09 207
jQuery UI Autocomplete是jQuery UI的自动完成组件，支持本地的Array/JSON数组、通过ajax请求的Array/JSON数组、JSONP、以及Function等方式来获取数据。 Array数组的简单例子： <script type="text/javascript" src="jquery-1.10.2.js"></script&...
jquery ui 插件之autocomplete
xiaozhuangyumaotao的博客
05-20 1178
jquery ui 的autocomplete组件可以到jquery ui官网去下载：http://jqueryui.com/download/#! 可以只勾选自己需要的组件，jquery ui会自动的把依赖也给你选择上，这叫做"定制下载",下载下来就可以使用autocomplete插件了。 下面是一个例子，完成的功能如下： 输入可以自动完成（这自然是基本功能） 点击输入框会让自动完成框显现出来 下面是效果图： 涉及到的html： <formclass="for.
记录 jQuery UI autocomplete 功能实现
csdn_fsm的博客
05-07 492
<input aria-label="Text input with dropdown button" class="form-control" type="search"> // jQuery UI autocomplete 动态提示搜索建议 $('section div input[type="search"]').autocomplete({ // 触发该事件的最短字符数 minLength: 0, 'source'(request, response) { // 如果变.
easyUI笔记11
08-08
easyUI笔记11

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值