`
pangxin12345
  • 浏览: 189276 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

autocomplete自动匹配

    博客分类:
  • js
阅读更多

 

这几天一直搞开发,

    动态提示:确定肯定是Ajax,想用存Ajax感觉工程浩大。于是想到了jQuery。想到了jQuery插件。废话少说。详细介绍autocomplete.

 

    下载:http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/  地址有可能改变。大家baidu 搜索 jquery autocomplete 下载。

    配置:解压缩后吧整个文件夹放入eclipse的项目中。

         导入样式根据自己的实际情况 <link rel="stylesheet" type="text/css" href="jquery-autocomplete/jquery.autocomplete.css " />

         导入库文件,这里也是根据自己的实际情况,注意(在导入库文件之前应该导入jQuery库文件,注意顺序)<script type="text/javascript" src="jquery-autocomplete/jquery-ui-all-min-lastest.js"></script >
    <script type="text/javascript" srcjquery-autocomplete/jquery.autocomplete.min.js"></script >

    使用:既然是动态提示! 就是输入内容以后触发Ajax到前台匹配。

jsp页面:

<input type="text" id="searchName" name="searchName" />

js:      var cityList;
          var options = {
            minChars: 1,//从第几个开始匹配
            max: 10,//显示匹配的个数
            width: 448,//宽度
            matchContains: true,//支持中文匹配
            formatItem: function(row, rowNum, rowCount, searchItem)//匹配条显示的格式化
            {
           
             if(row.hospitalname==undefined)
             {
                return  row.text ;
             }
             else
                return  row.text+"-"+row.hospitalname+"-"+row.officename ;
            },
            formatMatch: function(row, rowNum, rowCount)//按照什么匹配
            {
                return row.userid + " " + row.text;
            },
            formatResult: function(row, rowNum, rowCount)//格式化结果
            {
                return row.text;
            }
        };

       
        $(function()
        {
         $("#searchname").bind("click",getSearch);
        });
  function getSearch(event)//当点击时候执行函数
  {
   
    $.getJSON("/YHTWeb/userSearch.do?method=getUserSearchTitleListAjax",  
    {
     searchName:$("#searchname").val(),//配置参数
     d:new Date()//防止缓存
    },
    function(data){//回调函数
     var cityList = data.beans;//我在后台自己组织的json数据data.beans返回的是一个jsonArray。
     $('div[class="ac_results"]').remove();//防止多次添加!每次先清空div。通过firefox 可能看到
              $("#searchname").autocomplete(cityList, options);//自动匹配
              $("#searchname").result(function(event, row, formatted)//选择匹配项执行函数
              {
               $("#textuserid").val(row.userid);//这里说明吧id保存一个hidden中。
              });                
    }
   ) 
  }

通过这几步就可能实现了! 大家可以看看效果。注意后台组织数据! json。相信大家肯定成功。

 

相信大家实现了以后肯定有这样的疑问,匹配一个文本框就要写一个!这样通用性不强!下面写一下可以匹配多个的!做到jQuery 的宗旨,write less do more。

js:
function getSearch1(docName,searchAsName)
{
  $(function(){
  var searchname="#"+docName.id;
  var searchas=searchAsName;
        var cityList;
        var options = {
            minChars: 1,
            max: 10,
            width: 448,
            matchContains: true,
            formatItem: function(row, rowNum, rowCount, searchItem)
            {
           
             if(row.hospitalname==undefined)
             {
                return  row.text ;
             }
             else
                return  row.text+"-"+row.hospitalname+"-"+row.officename ;
            },
            formatMatch: function(row, rowNum, rowCount)
            {
                return row.userid + " " + row.text;
            },
            formatResult: function(row, rowNum, rowCount)
            {
                return row.text;
            }
        };

 

       
        $(function()
        {
         $(searchname).bind("click",getSearch);
        });
  function getSearch(event)
  {
   
    $.getJSON("/YHTWeb/userSearch.do?method=getUserSearchTitleListAjax",  
    {
     searchAs:searchas,
     searchName:$(searchname).val(),
     d:new Date()
    },
    function(data){
     var cityList = data.beans;
     $('div[class="ac_results"]').remove();
              $(searchname).autocomplete(cityList, options);
              $(searchname).result(function(event, row, formatted)
              {
               $("#textuserid").val(row.userid);
              });                
    }
   ) 
  }
})
  }

jsp:<input type="text" id="searchName" name="searchName" size="60" style="border:0;" onclick="getSearch1(this,$('#searchAs').val() )"/>//第一个参数是哪个控件实现,第二个是相当于event后台处理。

 

今天好累! 格式排版写的不好! 大家将就的看吧!

QQ:214644119

分享到:
评论

相关推荐

    android AutoComplete 自动匹配所有选项控件

    3. **监听输入变化**:`AutoCompleteTextView`会自动监听用户的输入,当输入达到一定长度(可通过`setThreshold(int)`设置)时,它会触发过滤器进行匹配操作。 4. **自定义过滤器**:如果你需要更复杂的匹配逻辑,...

    autocomplete高效自动匹配检索功能

    在IT行业中,自动匹配检索(Autocomplete)是一项广泛应用于各种搜索框和输入字段的功能,它极大地提升了用户体验,尤其是在处理大量数据时。"autocomplete高效自动匹配检索功能"的标题揭示了我们要探讨的核心技术,...

    BootStrap-autocomplete模糊匹配,自动填充

    在Bootstrap Autocomplete中,通常使用简单的字符串包含或正则表达式来实现,当用户输入一部分文本时,插件会自动过滤出匹配的选项。 5. **事件监听**:为了响应用户的输入,我们需要监听`keyup`或`keydown`等键盘...

    jquery-autocomplete 自动填充插件参数使用说明

    在Web开发中,为了提升用户体验,自动填充(Autocomplete)功能被广泛应用于搜索框、表单输入等场景。jQuery库提供了一个强大的Autocomplete插件,名为jQuery UI Autocomplete,它可以帮助开发者轻松实现这种功能。...

    JQ多个autocomplete 自动完成 实例

    在本文中,我们将深入探讨jQuery库中的`autocomplete`功能,这是一种强大的工具,可为用户提供智能搜索和自动填充建议。jQuery UI库提供了`autocomplete`插件,使得开发人员能够轻松地在网页表单输入框中实现自动...

    jQuery autocomplete 自动加载

    jQuery Autocomplete是一款非常实用的插件,用于在输入框中实现自动补全功能。这个功能在许多网站上广泛使用,例如搜索引擎、电子商务网站的商品搜索、社交媒体的用户名提示等。jQuery库的强大结合Autocomplete插件...

    Dwr+AutoComplete+pinyin4j 自动匹配

    导入myeclips就可用,智能搜索功能:让用户体验感觉良好点,在输入相关的关键搜索字时就可以得知相应的记录数 Dwr+AutoComplete+pinyin4j 自动匹配(中文,拼音)

    转:autoComplete 自动完成下拉框

    在IT领域,自动完成下拉框(通常称为AutoComplete或Autosuggest)是一种常见的用户界面功能,用于提高输入效率和用户体验。它会在用户输入文本时提供可能的匹配项,通常是基于之前输入的历史记录、数据库查询结果或...

    autocomplete自动补全的例子jsp

    综上所述,本示例中的"autocomplete自动补全的例子jsp"展示了如何在JSP项目中结合jQuery UI的Autocomplete插件,实现实时的搜索建议功能。通过前后端的协同工作,我们可以为用户提供便捷的输入体验,提升项目的整体...

    Dwr+AutoComplete+pinyin4j 自动匹配(中文,拼音)

    标题 "Dwr+AutoComplete+pinyin4j 自动匹配(中文,拼音)" 提到的技术栈涉及了三个关键部分:DWR(Direct Web Remoting)、AutoComplete(自动完成)和pinyin4j。这些技术在Web开发中都有特定的应用场景。 DWR是一...

    RichTextBox Autocomplete 自动完成 智能输入

    然而,有时我们希望它能具备更智能的功能,如自动完成(Autocomplete)或智能输入(IntelliSense),这在编写代码编辑器、搜索框或数据输入界面时非常有用。本文将深入探讨如何在C# WinForm应用中实现`RichTextBox`...

    autocomplete自动补全

    `jQuery Autocomplete` 是一个非常实用的功能,它能够为用户在输入框中提供动态的建议或自动补全,极大地提升了用户体验。这个功能是基于 jQuery UI 库中的 `Autocomplete` 组件实现的,它能够与多种数据源(如数组...

    jquery-autocomplete 自动完成

    jQuery Autocomplete 是一个非常流行的前端开发插件,它为输入框提供了自动完成的功能,极大地提升了用户在网页上的交互体验。这个插件基于JavaScript库jQuery构建,允许开发者轻松地创建搜索建议、动态填充表单等...

    autocomplete 自动检索提示 json方式

    在IT行业中,自动检索提示(Autocomplete)是一种常见的用户体验优化技术,它允许用户在输入时获得与输入内容匹配的建议选项。在这个特定的项目中,我们关注的是使用JSON格式进行数据传输和缓存策略来实现自动检索...

    可以输入带自动匹配的下拉框

    在IT行业中,创建一个“可以输入带自动匹配的下拉框”是常见的需求,尤其在网页交互设计中。这样的功能通常被称作自动补全(AutoComplete)或智能搜索框,它极大地提升了用户输入数据的效率和用户体验。下面将详细...

    Java swt 实现的文本框 自动匹配数据 演示以及源代码

    在本项目中,我们关注的是如何使用SWT来实现一个具有自动匹配功能的文本框。这个功能常见于许多应用程序中,如搜索引擎、下拉菜单等,它允许用户在输入时自动显示与输入内容相匹配的建议。 在Java SWT中,我们可以...

    Jquery Autocomplete 拼音首字母匹配

    1,本示例是基于微软拼音类库的jquery.autocomplete自动拼音首字母匹配搜索实现,解决了多音字匹配问题。 2,由于用了Linq查询,所以至少需要.NET Framework 3.5。 4,由于jquery匹配时的match项和result项来自不同...

    jquery文本框自动补全ajax autocomplete 完整实例

    在本文中,我们将深入探讨如何使用jQuery实现一个基于Ajax的文本框自动补全功能,以及相关的`autocomplete`插件的完整实例。这个功能在许多Web应用程序中非常常见,它能够提高用户输入的效率和用户体验。 首先,让...

    jquery的autocomplete(自动补全)插件

    **jQuery的Autocomplete插件**是用于实现网页输入框自动补全功能的一种高效解决方案,它极大地提升了用户体验,尤其是在用户需要从大量数据中选择时。这个插件是基于jQuery库的,因此,首先需要确保在项目中引入了...

    autocomplete自动补全(_renderItem定制结果显示格式)

    在IT行业中,自动补全(Autocomplete)是一种常见的功能,广泛应用于搜索引擎、代码编辑器、表单输入等场景,能够极大地提升用户输入效率。本文将深入探讨如何利用`autocomplete`功能,结合`_renderItem`定制结果...

Global site tag (gtag.js) - Google Analytics