`

jquery autocomplete插件的使用配置

阅读更多

jquery autocomplete插件,地址:http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

在具体使用的时候,需要引入基本的js文件和css文件,图片文件不引入,不会影响使用:

<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type='text/javascript' src='jquery.autocomplete.js'></script>

特别说明:该插件是根据jquery1.2.6编写的,当你引入的是比较高级的jquery文件的时候,需要在autocomplete.js中加入关于浏览器类型的判断,在高级版本的jquery文件中,已经舍弃的这部分内容:

   var userAgent = navigator.userAgent.toLowerCase();

// Figure out what browser is being used
jQuery.browser = {
 version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [])[1],
 safari: /webkit/.test( userAgent ),
 opera: /opera/.test( userAgent ),
 msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
 mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )

}

 

ajax请求处理关键代码:(后台返回的不是json格式的数据,而且一行一行的字符串,以“|”分割)

   if(someList!= null && someList.size() > 0){
    PrintWriter writer = response.getWriter();
    for(String[] strs:someList){
     writer.println(strs[0] + "|" + strs[1]);
    }
   }

 

ajax返回字符串后,autocomplete如此处理:

 function parse(data) {
  var parsed = [];
  var rows = data.split("\n");
  for (var i=0; i < rows.length; i++) {
   var row = $.trim(rows[i]);
   if (row) {
    row = row.split("|");
    parsed[parsed.length] = {
     data: row,
     value: row[0],
     result: options.formatResult && options.formatResult(row, row[0]) || row[0]
    };
   }
  }
  return parsed;
 };

分享到:
评论

相关推荐

    Jquery autocomplete插件使用

    接下来,我们将深入探讨jQuery Autocomplete插件的使用方法、配置选项、事件和数据源。 **1. 安装与引入** 首先,确保已经安装了jQuery和jQuery UI库。如果你还没有,可以通过CDN链接或者下载到本地项目中。引入所...

    jquery autocomplete下载.rar

    《jQuery Autocomplete 全面解析...总之,jQuery Autocomplete 插件通过其丰富的功能和灵活的配置,为网页应用的交互性提供了强大的支持。通过深入理解并合理运用这些知识点,我们可以创建出高效、友好的自动补全体验。

    Jquery autocomplete插件的使用示例

    下面我们将详细介绍如何使用jQuery Autocomplete插件。 首先,确保你已经引入了jQuery库和jQuery UI库。你可以通过CDN链接或本地文件引入。例如: ```html &lt;script src="https://code.jquery....

    jQuery AutoComplete使用实例

    **jQuery AutoComplete 使用详解** jQuery AutoComplete 是一个非常流行的 jQuery 插件,它为输入框提供了自动补全功能,能够极大地提升用户体验。这个插件基于 jQuery 库,因此需要先引入 jQuery 才能使用。在本文...

    jquery.autocomplete.js使用示例,可直接运行

    - **初始化Autocomplete**:在JavaScript中,我们需要初始化Autocomplete插件,配置其各种参数,如数据源、回调函数等。 ```javascript $(document).ready(function() { $("#autocomplete-input").autocomplete({ ...

    jquery自动补全插件(jquery autocomplete)

    **jQuery AutoComplete ...总结,jQuery AutoComplete 插件通过简单的配置和使用,可以实现强大的自动补全功能,提高用户体验。结合前端与后端接口,可以构建出高效的动态搜索功能。希望这个插件能为你的项目带来便利。

    jquery的autocomplete(自动补全)插件

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

    Jquery AutoComplete的使用方法实例

    总之,jQuery AutoComplete 是一个强大且灵活的工具,通过理解它的基本使用和配置选项,我们可以轻松地为网站添加智能输入提示,提升用户交互体验。实践中,结合实际情况灵活运用,你会发现这个插件能大大简化前端...

    jquery插件-autocomplete

    **jQuery Autocomplete插件详解** 在前端开发中,jQuery库为我们提供了丰富的功能和简便的API,使得网页交互变得更加便捷。而jQuery Autocomplete插件则是一个非常实用的工具,它能够帮助用户在输入框中实现自动...

    jquery autocomplete

    在本文中,我们将深入探讨 jQuery Autocomplete 的原理、配置选项、使用方法以及常见问题的解决策略。 ### 1. 基本原理 jQuery Autocomplete 主要通过监听用户的输入事件,然后根据预定义的数据源动态地生成下拉...

    jquery Autocomplete 仿百度搜索 只能搜索提示

    前端主要负责与用户交互,利用jQuery Autocomplete插件处理输入和显示建议。后端则需要处理来自前端的请求,查询数据库并返回匹配的数据。这里,我们可能需要用到AJAX技术来实现异步通信,使得用户在输入时无需等待...

    jquery autocomplete js 文件

    在本篇文章中,我们将深入探讨如何使用和配置 jQuery Autocomplete 插件,以及其背后的核心概念。 ### 1. jQuery Autocomplete 的基本原理 jQuery Autocomplete 是通过监听用户在输入框中的输入事件,根据输入内容...

    Jquery AutoComplete 使用demo

    jQuery AutoComplete 是一个非常流行的 jQuery 插件,它为输入框提供了自动补全的功能,广泛应用于网页表单、搜索框等场景,以提高用户体验。这个插件允许开发者从本地数组或通过异步方式从服务器获取数据,实现动态...

    jquery autocomplete dwr结合 修改Data

    标题中的“jQuery Autocomplete DWR结合 修改Data”指的是在Web开发中使用jQuery UI的Autocomplete组件与Direct Web Remoting (DWR)技术相结合,并对数据进行定制化处理的方法。jQuery Autocomplete是一个流行的UI...

    jquery autocomplete 动态补全例子有说明ajax加载

    jQuery Autocomplete是一款非常实用的JavaScript插件,它允许用户在输入框中输入文字时,根据已有的数据集动态提供补全建议。这个功能在许多Web应用中被广泛使用,如搜索框、表单输入等。在给定的“jquery ...

    jQuery:AutoComplete使用指南

    本文档旨在详细介绍jQuery AutoComplete插件的安装、配置及其各项参数的使用方法。 #### 二、安装与配置 1. **引入jQuery库**:首先需要确保页面已加载jQuery库。例如: ```html &lt;script src="./jquery-1.3.2.js...

    Jquery AutoComplete

    在本文中,我们将深入探讨 `jQuery AutoComplete` 的核心概念、使用方法、配置选项以及实际应用案例。 ### 1. 核心概念 `jQuery AutoComplete` 是基于 jQuery 和 jQuery UI 的插件,它通过监听用户在输入框中的...

    jquery.autocomplete.js

    使用jQuery Autocomplete插件的基本步骤如下: 1. 引入jQuery库和Autocomplete插件的JS及CSS文件。 2. 选择需要应用自动填充的文本框元素,通常使用jQuery选择器。 3. 调用`.autocomplete()`方法,并传入相应的配置...

    jquery autoComplete

    `jQuery autoComplete` 是一个基于 jQuery 库的插件,它为网页表单输入框提供了自动完成的功能。这个插件能够帮助用户在输入时快速匹配并显示预先设定的数据集,通常用于提升用户体验,特别是在处理大量可选项或需要...

    jquery.autocomplete.js资源压缩包下载

    `jquery.autocomplete.js`是jQuery的一个插件,它扩展了原生的jQuery库,增加了自动完成的功能。这个插件主要由两个核心部分组成:一个是前端展示部分,负责渲染和展示联想结果;另一个是数据处理部分,用于获取和...

Global site tag (gtag.js) - Google Analytics