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

好程序就是懒人喜欢的程序。好程序员就是懒人程序员。昨天研究了一下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>

时间: 2024-09-20 04:06:15

Jquery模仿Baidu、Google搜索时自动补充搜索结果提示_jquery的相关文章

win7系统使用百度搜索时自动跳转到搜狗搜索是怎么回事?

  win7系统使用百度搜索时自动跳转到搜狗搜索是怎么回事? 1.开始尝试恢复默认网关设置,可如从通知栏网络图标右键,打开网络和共享中心; 2.在打开的窗口中,点击左侧"更改适配器设置",选中已连接的网络(有线或无线),右键打开属性; 3.在打开的网络属性窗口中,双击"Internet 协议版本4",在常规选项卡下分别勾选"自动获得ip和dns服务器地址",点击确定保存,恢复默认设置; 4.另外,完成以上设置后,还可借助一些优化软件,比如360断

jQuery模仿阿里云购买服务器选择购买时间长度的代码_jquery

jQuery仿阿里云购买服务器选择时间长度,操作简单,只需点击所要选的时间段.下面给大家展示下效果图,就什么都明白了,如果大家觉得不错,请参考实现代码. 效果图如下: 代码: <!doctype html> <html lang="en"> <head> <!-- 效果:http://hovertree.com/texiao/jquery// --> <meta charset="UTF-"> <ti

jQuery Ajax 加载数据时异步显示加载动画_jquery

 ajax加载后台数据就不说的那么细了. 看下面代码首先前台上放置代码 <div id="loadgif" style="width:66px;height:66px;position:absolute;top:50%;left:50%;"> <img alt="加载中..." src="../../Images/loading1.gif"/> </div> 在js脚本文件中首先把这个图片动

jQuery实现在下拉列表选择时获取json数据的方法_jquery

本文实例讲述了jQuery实现在下拉列表选择时获取json数据的方法.分享给大家供大家参考.具体如下: function populateDropDown() { $.getJSON('/getData.aspx',{Name:$('#parm').val()},function(data){ var select = $('#DDLControl'); var options = select.attr('options'); $('option', select).remove(); $.e

jQuery实现感应鼠标动画效果自动伸长的输入框实例_jquery

本文实例讲述了jQuery实现感应鼠标动画效果自动伸长的输入框.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

jquery 模拟类搜索框自动完成搜索提示功能(改进)_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,//向上方向键

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

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

jquery图片不完全按比例自动缩小的简单代码_jquery

复制代码 代码如下: jQuery(document).ready(function(){ /* 图片不完全按比例自动缩小*/ $(window).load(function(){$('#content div.thumbnail img').each(function(){ var x = 200; //填入目标图片宽度 var y = 140; //填入目标图片高度 var w=$(this).width(), h=$(this).height();//获取图片宽度.高度 if (w > x

jquery提交form表单时禁止重复提交的方法_jquery

复制代码 代码如下: $(document).ready(function() {  $('form').submit(function() {    if(typeof jQuery.data(this, "disabledOnSubmit") == 'undefined') {      jQuery.data(this, "disabledOnSubmit", { submited: true });      $('input[type=submit], i