Jquery模仿Baidu、Google搜索时自动补充搜索结果提示

好程序就是懒人喜欢的程序。好程序员就是懒人程序员。昨天研究了一下Jquery 模仿Baidu、Google搜索时自动补充搜索结果的提示，感觉效果还行。特意和大家分享一下。所需Jquery插件。请看代码：


代码如下:

<script type="text/javascript">
$().ready( function () {

$(":text").result(auto);

function auto(data){
$("#keyWord").val(data.name);
}

$("#keyWord").autocomplete(obj, {//obj是数据对象数组Json
minChars: 0, //表示在自动完成激活之前填入的最小字符
max: 5, //表示列表里的条目数
autoFill: true, //表示自动填充
mustMatch: false, //表示必须匹配条目,文本框里输入的内容,必须是data参数里的数据,如果不匹配,文本框就被清空
matchContains: true, //表示包含匹配,相当于模糊匹配
scrollHeight: 200, //表示列表显示高度,默认高度为180

formatItem: function (row) {
return row.name;
},
formatMatch: function (row) {
return row.name;
},
formatResult: function (row) {
return row.value;
}
});
});
</script>

jsp：


代码如下:

<div>
<h4> 模仿BaiDu,google搜索提示功能</h4>
<table>
<tr><td>名称：<input type="text" id="keyWord" /></td></tr>
</table>
</div>

赞 (0)

相关推荐

  • jquery+php实现搜索框自动提示

    今天突然想给本站做个搜索页面,这样用户可以通过搜索来找到自己喜欢的内容,也避免了在海量信息中手动查找资源的麻烦,我的目标和百度首页的效果类似,当用户输入要搜索的文字时,我们在下方给出相关的十条信息,如果用户要找的就是这十条信息内的某一条,那么简单,直接点击就可在新页面中打开页面,主要就是想更人性化一点,让用户使用起来更方便. 先看一下效果图吧,这样更有动力,要不然大家还不知道我在讲什么,到底要达到什么样的效果! jquery+php实现搜索框自动提示 下面先主要讲解原理: 在search.htm

  • 从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件

    从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件

    一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍. 本文是介绍两个最常用的jQuery插件. 分别用于表单验证和自动完成提示(类似google suggest). 二.前言 研究别人的作品真是一件花时间而且痛苦的过程. 当然也和本人英文不好有关. 总觉得控件作者写了很多文档但是都不够系统, 需要深入研究很多的实例后才能了解作者的思路.所以学习和研究一个插件需要很高成本, 如果发现了Bug并修复需要

  • 基于jQuery的input输入框下拉提示层(自动邮箱后缀名)

    基于jQuery的input输入框下拉提示层(自动邮箱后缀名)

    效果图 代码部分 复制代码 代码如下: // JavaScript Document (function($){ $.fn.extend({ "changeTips":function(value){ value = $.extend({ divTip:"" },value) var $this = $(this); var indexLi = 0; //点击document隐藏下拉层 $(document).click(function(event){ if($(

  • jquery 模拟类搜索框自动完成搜索提示功能(改进)

    autopoint.js代码: 复制代码 代码如下: /* * @date: 2010-5-22 21:42:15 * @author: 胡灵伟 * Depends: * jquery.js * * function:类似GOOGLE搜索框提示功能 */ (function($) { $.fn.autopoint = function (options) { defaults = { url:options.url, keyLeft : 37,//向左方向键 keyUp : 38,//向上方向键

  • 基于JQuery的浮动DIV显示提示信息并自动隐藏

    复制代码 代码如下: /** * 浮动DIV定时显示提示信息,如操作成功, 失败等 * @param string tips (提示的内容) * @param int height 显示的信息距离浏览器顶部的高度 * @param int time 显示的时间(按秒算), time > 0 * @sample <a href="javascript:void(0);" onclick="showTips( '操作成功', 100, 3 );">点击

  • jquery 提示信息显示后自动消失的具体实现

    经常需要做让一个提示信息显示几秒然后自动消失的效果,之前是用setTimeout去实现,但是发现如果页面上有多个setTimeout就不太好.今天找到了两个很简单的方法.mark一下. 方法一: 复制代码 代码如下: $("#errormsg").html("您的信息输入错误,请重试!").show(300).delay(3000).hide(300); 方法二: 复制代码 代码如下: $("#errormsg").html("ok&q

  • jQuery 实现自动填充邮箱功能（带下拉提示）

    jQuery 实现自动填充邮箱功能（带下拉提示）

    在做这个功能时候,我参考的是网易注册(http://reg.163.com/reg/reg.jsp?product=urs)中的邮箱栏目所实现的功能与效果.这个功能的目的是使用户在填写邮箱栏目的过程中,在带有邮箱后缀名的菜单的提示下,可以不需要完整输入自己的注册邮箱,达到方便.快捷.友好的效果.在做这个功能的时候,需要充分站在使用者的角度,看怎样设计能够最符合通常情况下人们的使用习惯,又怎样设计反而会让用户感到不便.先来看看功能实现的演示效果图: 在线演示:http://jsfiddle.net

  • JQuery浮动DIV提示信息并自动隐藏的代码

    复制代码 代码如下: /** * 浮动DIV定时显示提示信息,如操作成功, 失败等 * @param string tips (提示的内容) * @param int height 显示的信息距离浏览器顶部的高度 * @param int time 显示的时间(按秒算), time > 0 * @sample <a href="javascript:void(0);" onclick="showTips( '操作成功', 100, 3 );">点击

  • Jquery模仿Baidu、Google搜索时自动补充搜索结果提示

    好程序就是懒人喜欢的程序.好程序员就是懒人程序员.昨天研究了一下Jquery 模仿Baidu.Google搜索时自动补充搜索结果的提示,感觉效果还行.特意和大家分享一下.所需Jquery插件.请看代码: 复制代码 代码如下: <script type="text/javascript"> $().ready( function () { $(":text").result(auto); function auto(data){ $("#keyW

  • jQuery实现滚动到底部时自动加载更多的方法示例

    本文实例讲述了jQuery实现滚动到底部时自动加载更多的方法.分享给大家供大家参考,具体如下: 这里利用AJAX,实现滚动到底加载数据功能: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/

  • 基于javascript实现的搜索时自动提示功能

    基于javascript实现的搜索时自动提示功能

    当在数据量不是很大,而且没有后端对应的功能接口的时候,一些简单的搜索功能基本上是前端去实现的,正好最近用到,写了一个,贴出来和大家分享: 效果图: 功能描述: 按下键盘后及时搜索条目中的汉字,汉字对应的拼音和号码: 实现思路: 先将条目中的汉字转换成拼音,然后将汉字,拼音,数字拼接成规律的字符串,放入数组,然后每次按下键盘后判断 input 中的值是汉字,拼音,还是数字,然后按固定的规律去循环数组,这样就能找到对应的条目了: 启用方式: // search-test-inner --->  最外

  • 基于jQuery实现搜索关键字自动匹配功能

    基于jQuery实现搜索关键字自动匹配功能

    今天我们就一起来看一个简单的基于jquery的关键字自动匹配的例子,希望文章能够对各位有帮助. 例子一 在项目中,有时候需要用户选择城市,但是城市太多,用户选择起来不太方便,所以提供了一个用户可以通过输入框输入城市的汉字或者拼音简写.结果示意图如下: 当输入拼音后结果示意图如下: 实现代码如下: <html><head><title>实时查询城市通过姓名或拼音简写</title></head><meta charset = "ut

  • Jquery插件仿百度搜索关键字自动匹配功能

    Jquery插件仿百度搜索关键字自动匹配功能

    本文实例为大家分享了Jquery搜索关键字自动匹配功能的实现代码,供大家参考,具体内容如下 jQuery AutoComplete 是一个基于jQuery实现搜索关键字自动匹配提示的插件,该插件可扩展性强,表现性能优越,方便整合到自己的项目中使用:兼容IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+, and Chrome 1.0+ 等主流浏览器. 下面是具体的使用方法: 1.使用设置 首页,要把插件的js代码嵌入到你自己的项目中去. 复制代码 代码如下: <scr

  • jQuery ajax仿Google自动提示SearchSuggess功能示例

    jQuery ajax仿Google自动提示SearchSuggess功能示例

    本文实例讲述了jQuery ajax仿Google自动提示SearchSuggess功能.分享给大家供大家参考,具体如下: 页面: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM

  • JQuery搜索框自动补全(模糊匹配)功能实现示例

    JQuery搜索框自动补全(模糊匹配)功能实现示例

    本地实现了一个搜索框自动补全的小功能,在JQuery UI的autocomplete插件的基础上,加入了自己的业务代码,贴出来回顾一下,同时可以给大家一个参考 首先贴出的是JQuery Ui 的自动补全插件部分的代码,后面的功能都是在其基础上追加的,直接拷贝到你的本地就可以直观的看到运行效果,也可以到官网上面体验和查看,为了方便,我这里是直接引入的JS链接点击下载JQuery UI的源码 <!doctype html> <html lang="en"> <

  • jquery在启动页面时,自动加载数据的实例

    其实,重要的就是这个方法: $(document).ready(function(){ } 具体的在jquery中: 具体的ajax怎么使用,可以查看我的上一篇博客<浅谈ajax在jquery中的请求和servlet中的响应> <script type="text/javascript"> $(document).ready(function(){ var str = ""; var strA = ""; $.ajax({

随机推荐