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     width: 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" >
77 <input id="project">
78 <input type="hidden" id="project-id">
79 <p id="project-description"></p>
80
81
82 </body>
83 </html>
时间: 2024-10-13 15:34:50

Jquery AutoComplete实现搜索自动完成的相关文章

JQuery autocomplete ajax 实现自动完成

根据输入框内容实时查询展示, 类似百度输入框效果. 废话不多说, 上代码. 1.引入插件. <link rel="stylesheet" type="text/css" href="${ctx}/js/jquery/jquery.autocomplete.css" /> <script type="text/javascript" src="${ctx}/js/jqueryUI/jquery.ui.

jQuery.Autocomplete实现自动完成功能-搜索提示功能

$(function(){ var availableTags=["ads","abc","acc"]; $("#tags").autocomplete({source:availableTags}); }); <input type="text" id="tags"> 语法: autocomplete(urlor data, [options] ) 参数: url or d

jquery autocomplete 自动补全

写在前面 autocomplete是jqueryUI里的一个插件 效果和说明可以访问这里,作用类似于搜索时的自动提示: 相信用过jQuery autocomplete 自动补全功能同学有不少,但是往往我们所对应的需求不同,有的仅仅是为了省事,敲两个字就有一堆可供选择的信息可供选择,但并不是所有需求都是这样的,我们还有这样的需求,敲两个字,将这个文字对应的实体绑定出来. 主要的参数 jQuery UI Autocomplete常用的参数有: Source:用于指定数据来源,类型为String.Ar

搜索自动提示的简单模拟JQuery

使用jQuery实现类似于百度搜索时的自动完成功能,界面效果 所示. 首先在输入框上注册keyup事件,然后在事件中通过AJAX获取JSON对象.取得数据后,每一项数据创建一个li标签,在标签上注册click事件,这样当我们点击每一项的时候,就可以响应事件.键盘导航的关键是记录当前高亮的索引值,根据索引值来调整背景高亮.显示下拉列表的位置要根据输入框的位置来设置,当浏览器的大小改变时,随时调整下拉列表的位置. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

jquery autocomplete实现读取sql数据库自动补全TextBox

项目需要这样子一个功能,其他部门提的意见,只好去实现了哦,搞了好久才弄出来,分享一下. 1.前台页面 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti

JQuery AutoComplete搜索智能提示

首先需要引入的文件有: jquery-ui-1.10.4.custom.min.cssjquery-ui-1.10.4.custom.min.js 然后在后台组织json格式的数据,组织成一个list型数据String id;String label;String value; 如: var availableTagsJSON = [ { label: "C#", value: "C#", id: "1" }, { label: "C+

jquery.autocomplete 自动补全 应用

下拉自动补全的js控件还是很多的,不过好多都被集成在N多组件之一了,像Jquery.easyui,jquery.chonsen等等都可以实现类似的功能.但我想要的是是一款简单轻巧,应用于整个系统的js. 于是我选择了jquery.autocomplete.js,基本参数注解参考:http://www.cnblogs.com/EWall/archive/2011/04/28/2031613.html,JS及相关CSS可在google code下载,链接https://code.google.com

jQuery.Autocomplete实现自动完成功能(详解)

2.jquery.autocomplete详解 语法: autocomplete(urlor data, [options] ) 参数: url or data:数组或者url [options]:可选项,选项解释如下: 1) minChars (Number) 在触发autoComplete前用户至少需要输入的字符数,Default:1,如果设为0,在输入框内双击或者删除输入框内内容时显示列表. 2) width (Number) 指定下拉框的宽度,Default: input元素的宽度 3)

JQuery 插件之Ajax Autocomplete(ajax自动完成)

平时用百度,谷歌搜索的时候 会有一个下 拉列表进行提示 这是一个非常好的功能 本文要介绍的这个JQuery 插件 名叫Ajax Autocomplete 顾名思义 ajax 也就是用ajax的方式获取搜索提示信息然后返回呈现出来 上效果图 闲话不多说直接上代码 本文使用到的文件有: 1,点击 Ajax Autocomplete for jQuery, version 1.1.3  下载 引用文件: <script type="text/javascript" src="