jQuery-autoComplete实例_jquery autocomplete 实例-CSDN博客

本文链接：https://blog.csdn.net/u010286334/article/details/49099773

1）简易的，

var availableTags = [

                         "ActionScript",
                         "AppleScript",
                         "Asp",
                         "BASIC",
                         "C",
                         "C++",
                         "Clojure",
                         "COBOL",
                         "ColdFusion",
                         "Erlang",
                         "Fortran",
                         "Groovy",
                         "Haskell",
                         "Java",
                         "JavaScript",
                         "Lisp",
                         "Perl",
                         "PHP",
                         "Python",
                         "Ruby",
                         "Scala",
                         "Scheme"

];

$("#auto").on("change",function(){

$("#auto").autocomplete({

source:availableTags,

});

2)多个项目自定义数据

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"
                                       }
                                     ];

$("#auto").on("change",function(){
       //$("#auto").find("option").remove();
       $("#auto").autocomplete({
              minLength: 0,
              source:projects,
              focus: function( event, ui ) {
                $( "#auto" ).val( ui.item.label );
                return false;
              },
              select: function( event, ui ) {
                $( "#auto" ).val( ui.item.label );
                $( "#auto-id" ).val( ui.item.value );
                $( "#auto-description" ).html( ui.item.desc );
                $( "#auto-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 );
            };

});

3)从后台获取数据

    <package name="auto" extends="json-default"> //返回的是json数据
       <action name="getArea" class="com.lc.test.action.AutoAction" method="getArea">
           <result type="json">
               <param name="root">autoList</param> //返回值需要的autoList定义为根目录，其他返回值就不会返回，只有我需要的list里面的值
           </result>
       </action>
   </package>

private String term;

        public String getArea(){
       System.out.println("term:"+term); //term变量取自autoComplete控件自动添加的变量，从页面上传递到后台，是用户输入的要搜索的关键字。
       AutoBean ab=new AutoBean();
       ab.setValue("jquery");
       ab.setLabel("jquery");
       ab.setDesc("the write less, do more, JavaScript library");
       autoList.add(ab);
       return SUCCESS;
   }

$("#auto").on("change",function(){
       $("#auto").autocomplete({
              minLength: 0,
              source:"getArea?", //资源路径
              focus: function( event, ui ) { //当鼠标滑过某一个item时的动作
                $( "#auto" ).val( ui.item.label );
                return false;
              },
              select: function( event, ui ) { //当鼠标单击某一个item时的动作
                $( "#auto" ).val( ui.item.label );
                $( "#auto-id" ).val( ui.item.value );
                //$( "#auto-description" ).html( ui.item.desc );
                return false;
              }
            })
            .data( "ui-autocomplete" )._renderItem = function( ul, item ) { //从后台取出信息后，这里负责显示。每一次创建一个<li>，并且添加到ul上面。这些都是和控件配合，有些名称需要一致。这里可以修改展示的样式。
              return $( "<li>" )
                .append( "<a>" + item.label + "</a>" )
                .appendTo( ul );
            };