您的位置：360文档中心› jQuery实现仿百度搜索时的下拉列表

jQuery实现仿百度搜索时的下拉列表

合集下载

jQuery实现二级下拉菜单效果

jQuery实现二级下拉菜单效果

jQuery实现⼆级下拉菜单效果⼤家都知道jQuery是⼀个框架，它对JS进⾏了封装，使其更⽅便使⽤。

前⾯两篇博⽂分别是⽤CSS样式和JS实现的，那么这篇就⽤jQuery来实现⼆级下拉式菜单。

使⽤JQuery实现需要⽤到的知识有：1)使⽤$(function(){...})获取到想要作⽤的HTML元素。

2)通过使⽤children()⽅法寻找⼦元素。

3)通过使⽤show()⽅法来显⽰HTML元素。

4)通过使⽤hide()⽅法来隐藏HTML元素。

5)jQuery库引⽤⽅法:先来看看效果图：最后我们来看看代码的情况，和前⾯的区别不⼤：HTML代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>下拉菜单</title><link rel="stylesheet" type="text/css" href="style.css" /><!--引⽤百度服务器的jQuery库--><script src="/jquery/1.9.0/jquery.js"></script><script type="text/javascript" src="script.js"></script></head><body><div id="nav" class="nav"><ul><li><a href="#">⽹站⾸页</a></li><li class="navmenu"><a href="#">课程⼤厅</a><ul><li><a href="#">JavaScript</a></li><li><a href="#">jQuery</a></li><li><a href="#">Ajax</a></li></ul></li><li class="navmenu"><a href="#">学习中⼼</a><ul><li><a href="#">视频学习</a></li><li><a href="#">案例学习</a></li><li><a href="#">交流平台</a></li></ul></li><li><a href="#">经典案例</a></li><li><a href="#">关于我们</a></li></ul></div></body></html>CSS样式表外部style.css⽂件代码：/*CSS全局设置*/*{margin:0;padding:0;}.nav{background-color:#EEEEEE;height:40px;width:450px;margin:0 auto;}ul{list-style:none;}ul li{float:left;line-height:40px;text-align:center;}a{text-decoration:none;color:#000000;display:block;width:90px;height:40px;}a:hover{background-color:#666666;color:#FFFFFF;}ul li ul li{float:none;background-color:#EEEEEE;}ul li ul{display:none;}/*为了兼容IE7写的CSS样式，但是必须写在a:hover前⾯*/ul li ul li a:link,ul li ul li a:visited{background-color:#EEEEEE;}ul li ul li a:hover{background-color:#009933;}JS脚本外部script,js⽂件代码：$(function(){$(".navmenu").mouseover(function(){$(this).children("ul").show();})$(".navmenu").mouseout(function(){$(this).children("ul").hide();})})希望本⽂所述对⼤家学习jquery程序设计有所帮助。

带搜索框的jQuery下拉框插件

带搜索框的jQuery下拉框插件

带搜索框的jQuery下拉框插件由于下拉框的条数有⼏⼗个，于是打算找⼀个可以搜索查找功能的下拉框，刚开始在⽹上看了⼏个，都是有浏览器兼容性问题，后来看到这个“”，看演⽰代码简单易⽤，⽀持多个浏览器。

不过在使⽤过程中碰到了⼏个问题，先后解决了。

1、多个下拉框放在⼀起会出现遮挡的问题，原⽂评论有个解决⽅法：在jquery.searchableSelect.js⽂件⾥⾯的代码⾥⾯加上下⾯2⾏带注释的代码show: function() {this.dropdown.removeClass('searchable-select-hide');this.input.focus();this.status = 'show';this.setPriviousAndNextVisibility();this.dropdown.css('z-index', 100); //打开下拉列表时调⾼z-index层级}, hide: function() {if (!(this.status === 'show')) return;if (this.items.find(':not(.searchable-select-hide)').length === 0) this.input.val('');this.dropdown.addClass('searchable-select-hide');this.searchableElement.trigger('focus');this.status = 'hide';this.dropdown.css('z-index', 1); //关闭下拉列表时恢复z-index层级},2、原⽂⽤的是jquery-1.11.1.min.js，但是整个项⽬⽤的是jquery-1.7.2.js，在chrome浏览器F12调试⼀加载页⾯会出现错误信息：Uncaught TypeError: $.expr.createPseudo is not a function$(...).searchableSelect is not a function点进去提⽰$.expr.createPseudo有语法错误猜测是jquery版本问题，果然，搜索了⼀下，$.expr.createPseudo是jquery1.8.1版本以上⽀持的。

利用Jquery实现可多选的下拉框

利用Jquery实现可多选的下拉框

利⽤Jquery实现可多选的下拉框⾸先下载jquery.multiselect.js 的插件然后复制下列代码，只需改下路径就可以实现可多选下拉框。

如果好⽤还请多多⽀持！复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css"><!--body {margin-left: 5px;margin-top: 5px;margin-right: 5px;margin-bottom: 5px;}--></style><script type="text/javascript" src="jquery.js"></script><link rel="stylesheet" type="text/css" href="jquery-ui.css" /><script type="text/javascript" src="jquery-ui.min.js"></script><script type="text/javascript" src="jquery.multiselect.js"></script><link rel="stylesheet" type="text/css" href="jquery.multiselect.css" /><script type="text/javascript">$(function(){$("#company").multiselect();});</script></head><body><table align="center"><tr><td height="49"><select name="company" id="company"><option value="北⽅公司" selected="selected">北⽅公司【总公司】</option><option value="西南公司">西南公司</option></select><span id="company1" style="color:#FF0000"></span></td><td align="left">&nbsp;</td></tr></table></body></html>。

php+ajax做仿百度搜索下拉自动提示框（2）

php+ajax做仿百度搜索下拉自动提示框（2）

php+ajax做仿百度搜索下拉自动提示框（2）php+ajax做仿百度搜索下拉自动提示框--CREATE TABLE IF NOT EXISTS `countries` (`id` int(6) NOT NULL auto_increment,`value` varchar(250) NOT NULL default '',PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=243 ;---- 转存表中的数据 `countries`--INSERT INTO `countries` (`id`, `value`) VALUES(1, 'Afghanistan'),(2, 'Aringland Islands'),(3, 'Albania'),(4, 'Algeria'),(5, 'American Samoa'),(6, 'Andorra'),(7, 'Angola'),(8, 'Anguilla'),(9, 'Antarctica'),(10, 'Antigua and Barbuda'),(11, 'Argentina'),(12, 'Armenia'),(13, 'Aruba'),(14, 'Australia'),(15, 'Austria'),(16, 'Azerbaijan'),(17, 'Bahamas'),(18, 'Bahrain'),(19, 'Bangladesh'),(20, 'Barbados'),(21, 'Belarus'),(22, 'Belgium'),(23, 'Belize'),(24, 'Benin'),(25, 'Bermuda'),(26, 'Bhutan'),(27, 'Bolivia'),(28, 'Bosnia and Herzegovina'), (29, 'Botswana'),(30, 'Bouvet Island'),(31, 'Brazil'),(32, 'British Indian Ocean territory'), (33, 'Brunei Darussalam'),(34, 'Bulgaria'),(35, 'Burkina Faso'),(36, 'Burundi'),(37, 'Cambodia'),(38, 'Cameroon'),(39, 'Canada'),(40, 'Cape Verde'),(41, 'Cayman Islands'),(42, 'Central African Republic'), (43, 'Chad'),(44, 'Chile'),(45, 'China'),(46, 'Christmas Island'),(47, 'Cocos (Keeling) Islands'), (48, 'Colombia'),(49, 'Comoros'),(50, 'Congo'),(51, 'Congo'),(52, ' Democratic Republic'), (53, 'Cook Islands'),(54, 'Costa Rica'),(55, 'Ivory Coast (Ivory Coast)'), (56, 'Croatia (Hrvatska)'), (57, 'Cuba'),(58, 'Cyprus'),(59, 'Czech Republic'),(60, 'Denmark'),(61, 'Djibouti'),(62, 'Dominica'),(63, 'Dominican Republic'), (64, 'East Timor'),(65, 'Ecuador'),(66, 'Egypt'),(67, 'El Salvador'),(68, 'Equatorial Guinea'), (69, 'Eritrea'),(70, 'Estonia'),(71, 'Ethiopia'),(72, 'Falkland Islands'), (73, 'Faroe Islands'),(74, 'Fiji'),(75, 'Finland'),(76, 'France'),(77, 'French Guiana'),(78, 'French Polynesia'),(79, 'French Southern Territories'), (80, 'Gabon'),(81, 'Gambia'),(82, 'Georgia'),(83, 'Germany'),(84, 'Ghana'),(85, 'Gibraltar'),(86, 'Greece'),(87, 'Greenland'),(88, 'Grenada'),(89, 'Guadeloupe'),(90, 'Guam'),(91, 'Guatemala'),(92, 'Guinea'),(93, 'Guinea-Bissau'),(94, 'Guyana'),(95, 'Haiti'),(96, 'Heard and McDonald Islands'), (97, 'Honduras'),(98, 'Hong Kong'),(99, 'Hungary'),(100, 'Iceland'),(101, 'India'),(102, 'Indonesia'),(103, 'Iran'),(104, 'Iraq'),(105, 'Ireland'),(106, 'Israel'),(107, 'Italy'),(108, 'Jamaica'),(109, 'Japan'),(110, 'Jordan'),(111, 'Kazakhstan'),(112, 'Kenya'),(113, 'Kiribati'),(114, 'Korea (north)'),(115, 'Korea (south)'),(116, 'Kuwait'),(117, 'Kyrgyzstan'),(118, 'Lao People''s Democratic Republic'), (119, 'Latvia'),(120, 'Lebanon'),(121, 'Lesotho'),下载文档。

实现类似百度的可以输入的下拉列表的功能

实现类似百度的可以输入的下拉列表的功能

在ie环境下触发<html><head><script language="javascript">function test(){var inputdiv = document.getElementById("inputdiv");inputdiv.innerHTML += document.getElementById("test").value+"<br>";}function showdiv(){var inputdiv = document.getElementById("inputdiv");inputdiv.style.display = "block";inputdiv.innerHTML = "";}function hiddendiv(){var inputdiv = document.getElementById("inputdiv");inputdiv.style.display = "none";}</script></head><body><input type="text" onFocus="showdiv();" onBlur="hiddendiv();" id="test" onpropertychange="test();"/><div id="inputdiv" style="display:none;background-color:green;width:150px;height:150px;"></div> </body></html>重点是onpropertychange事件在火狐环境下触发<html><head><script language="javascript">function test(){var inputdiv = document.getElementById("inputdiv");inputdiv.innerHTML += document.getElementById("test").value+"<br>";}function showdiv(){var inputdiv = document.getElementById("inputdiv");inputdiv.style.display = "block";inputdiv.innerHTML = "";}function hiddendiv(){var inputdiv = document.getElementById("inputdiv");inputdiv.style.display = "none";}</script></head><body><input type="text" onFocus="showdiv();" onBlur="hiddendiv();" id="test" onpropertychange="test();"/><div id="inputdiv" style="display:none;background-color:green;width:150px;height:150px;"></div> </body></html>重点是oninput事件。

jquery之仿百度搜索框

jquery之仿百度搜索框

jquery之仿百度搜索框最近项⽬中⽤到类似百度的输⼊框，于是⾃⼰⽤jquery写了⼀个。

希望和⼤家共同分享⼀下。

存在许多bug，请各位不吝赐教。

先看看整个的效果图：图⼀：图⼆：图三：图四：⼤概的效果图就这样，接下来直接看源码页⾯：View Code1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="autoSearch._Default" %>23 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">45 <html xmlns="/1999/xhtml" >6 <head runat="server">7 <title></title>8 <link href="autoSearchText.css" type="text/css" rel="Stylesheet" />9 <script src="jquery-1.5.1.min.js" type="text/javascript"></script>10 <%if (false){ %>11 <script type="text/javascript" src="jquery-1.5.1.js"></script>12 <%} %>13 <script src="jquery.autoSearchText.js" type="text/javascript"></script>14 <script type="text/javascript">15 $(document).ready(function() {16 $('#autoSearchText').autoSearchText({ width: 300, itemHeight: 150,minChar:1, datafn: getData, fn: alertMsg });17 });18 function alertMsg(vl){19 alert('你将要搜索的关键字是： '+vl);20 }21/*加载数据*/22 function getData(val) {23 var arrData = new Array();24if (val != "") {25 $.ajax({26 type: "post",27 async: false, //控制同步28 url: "getData.ashx",29 data: "param=" + val,30 dataType: "json",31 cache: false,32 success: function(data) {33for (var i = 0; i < data.length; i++) {34if (val == data[i].Code.substring(0, val.length))35 arrData.push(data[i].Code);36 }37 },38 Error: function(err) {39 alert(err);40 }41 });42 }43return arrData;44 }45 </script>46 </head>47 <body>48 <form id="form1" runat="server">49 <div>50 <input id="autoSearchText" type="text" value="请输⼊编码" enableviewstate="false"/>51 <br />52 <input id="Text1" type="text" style=" display:none;"/>53 </div>54 </form>55 </body>56 </html>CSS：View Code1.autoSearchText{2 border:solid 1px #CFCFCF;3 height:20px;4 color:Gray;5 }6.menu_v{7 margin:0;8 padding:0;9 line-height:20px;10 font-size:12px;11 list-style-type:none;12 }13.menu_v li{14 margin:0;15 padding:0;16 line-height:20px;17 font-size:14px;18 list-style-type:none;19 float:none;20 }21.menu_v li span{22 color:Red;23 }24#autoSearchItem{25 border:solid 1px #CFCFCF;26 visibility:hidden;27 position:absolute;28 background-color:white;29 overflow-y:auto;30 }JS：View Code1///<reference path="jquery-1.5.1.js" />23 (function($) {4var itemIndex = 0;56 $.fn.autoSearchText = function(options) {7//以下为该插件的属性及其默认值8var deafult = {9 width: 200, //⽂本框宽10 itemHeight: 150, // 下拉框⾼11 minChar: 1, //最⼩字符数(从第⼏个开始搜索)12 datafn: null, //加载数据函数13 fn: null//选择项后触发的回调函数14 };15var textDefault = $(this).val();16var ops = $.extend(deafult, options);17 $(this).width(ops.width);18var autoSearchItem = '<div id="autoSearchItem"><ul class="menu_v"></ul></div>';19 $(this).after(autoSearchItem);2021 $('#autoSearchItem').width(ops.width + 2); //设置项宽22 $('#autoSearchItem').height(ops.itemHeight); //设置项⾼2324 $(this).focus(function() {25if ($(this).val() == textDefault) {26 $(this).val('');27 $(this).css('color', 'black');28 }29 });30var itemCount = $('li').length; //项个数31/*⿏标按下键时，显⽰下拉框，并且划过项时改变背景⾊及赋值给输⼊框*/32 $(this).bind('keyup', function(e) {33if ($(this).val().length >= ops.minChar) {34var position = $(this).position();35 $('#autoSearchItem').css({ 'visibility': 'visible', 'left': position.left, 'top': position.top + 24 }); 36var data = ops.datafn($(this).val());37 initItem($(this), data);38var itemCount = $('li').length;39switch (e.keyCode) {40case 38: //上41if (itemIndex > 1) {42 itemIndex--;43 }44 $('li:nth-child(' + itemIndex + ')').css({ 'background': 'blue', 'color': 'white' });45 $(this).val($('li:nth-child(' + itemIndex + ')').find('font').text());46break;47case 40: //下48if (itemIndex < itemCount) {49 itemIndex++;50 }51 $('li:nth-child(' + itemIndex + ')').css({ 'background': 'blue', 'color': 'white' });52 $(this).val($('li:nth-child(' + itemIndex + ')').find('font').text());53break;54case 13: //Enter55if (itemIndex > 0 && itemIndex <= itemCount) {56 $(this).val($('li:nth-child(' + itemIndex + ')').find('font').text());57 $('#autoSearchItem').css('visibility', 'hidden');58 ops.fn($(this).val());59 }60break;61default:62break;63 }64 }65 });66/*点击空⽩处隐藏下拉框*/67 $(document).click(function() {68 $('#autoSearchItem').css('visibility', 'hidden');69 });70 };71/*获取⽂本框的值*/72 $.fn.getValue = function() {73return $(this).val();74 };7576/*初始化下拉框数据,⿏标移过每项时，改变背景⾊并且将项的值赋值给输⼊框*/77function initItem(obj, data) {78var str = "";79if (data.length == 0) {80 $('#autoSearchItem ul').html('<div style="text-align:center;color:red;">⽆符合数据<div>');81 }82else {83for (var i = 1; i <= data.length; i++) {84 str += "<li><span>" + i + "/" + data.length + "</span>\r<font>" + data[i - 1] + "</font></li>";85 }86 $('#autoSearchItem ul').html(str);87 }88/*点击项时将值赋值给搜索⽂本框*/89 $('li').each(function() {90 $(this).bind('click', function() {91 obj.val($(this).find('font').text());92 $('#autoSearchItem').css('visibility', 'hidden');93 });94 });95/*⿏标划过每项时改变背景⾊*/96 $('li').each(function() {97 $(this).hover(98function() {99 $('li:nth-child(' + itemIndex + ')').css({ 'background': 'white', 'color': 'black' });100 itemIndex = $('li').index($(this)[0]) + 1;101 $(this).css({ 'background': 'blue', 'color': 'white' });102 obj.val($('li:nth-child(' + itemIndex + ')').find('font').text());103 },104function() {105 $(this).css({ 'background': 'white', 'color': 'black' });106 }107 );108 });109 };110 })(jQuery);getdata.ashxView Code1using System;2using System.Collections.Generic;3using System.Linq;4using System.Web;5using System.Web.Services;67namespace table8 {9///<summary>10/// $codebehindclassname$ 的摘要说明11///</summary>12 [WebService(Namespace = "/")]13 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]14public class getData : IHttpHandler15 {1617public void ProcessRequest(HttpContext context)18 {19 context.Response.Clear();20string value = GetResult();21 context.Response.Write(value);22 context.Response.End();23 }2425private string GetResult()26 {27string result = string.Empty;2829 result = @"30 [{""id"":""1"",""Code"":""1374123""},31 {""id"":""2"",""Code"":""1374133""},32 {""id"":""3"",""Code"":""1374143""},33 {""id"":""4"",""Code"":""1374153""},34 {""id"":""5"",""Code"":""1374163""},35 {""id"":""6"",""Code"":""1374173""},36 {""id"":""7"",""Code"":""1374183""},37 {""id"":""8"",""Code"":""1374193""},38 {""id"":""9"",""Code"":""1374213""},39 {""id"":""10"",""Code"":""1374223""},40 {""id"":""11"",""Code"":""1374233""},41 {""id"":""12"",""Code"":""1374243""},42 {""id"":""13"",""Code"":""1374253""},43 {""id"":""14"",""Code"":""1374263""},44 {""id"":""15"",""Code"":""1374273""},45 {""id"":""16"",""Code"":""1374283""},46 {""id"":""17"",""Code"":""1374293""},47 {""id"":""18"",""Code"":""1374313""},48 {""id"":""19"",""Code"":""1374323""},49 {""id"":""20"",""Code"":""1374333""},50 {""id"":""21"",""Code"":""1374343""},51 {""id"":""22"",""Code"":""1374353""},52 {""id"":""23"",""Code"":""1374363""},53 {""id"":""24"",""Code"":""1374373""},54 {""id"":""25"",""Code"":""1374383""},55 {""id"":""26"",""Code"":""1374393""},56 {""id"":""27"",""Code"":""1374403""},57 {""id"":""28"",""Code"":""1374413""},58 {""id"":""29"",""Code"":""1374423""},59 {""id"":""30"",""Code"":""1374433""},60 {""id"":""31"",""Code"":""1374443""},61 {""id"":""32"",""Code"":""1374453""},62 {""id"":""33"",""Code"":""1374463""},63 {""id"":""34"",""Code"":""1374473""},64 {""id"":""35"",""Code"":""1374483""},65 {""id"":""36"",""Code"":""1374493""}]"; 6667return result;68 }6970public bool IsReusable71 {72get73 {74return false;75 }76 }77 }78 }。

jq实现页面无限下拉功能的方法

jq实现页面无限下拉功能的方法

jq实现页面无限下拉功能的方法（原创实用版2篇）目录（篇1）I.页面无限下拉功能的概念和意义II.jq实现页面无限下拉功能的方法III.总结正文（篇1）一、页面无限下拉功能的概念和意义页面无限下拉功能是指当用户滚动到页面底部时，可以继续向下滚动并加载更多内容，以实现无缝的浏览体验。

这种功能可以提高用户体验，使网站更加友好和易于使用。

二、jq实现页面无限下拉功能的方法1.使用CSS实现无限下拉功能使用CSS的`overflow`属性可以控制元素是否溢出，将其设置为`auto`可以触发无限下拉功能。

然后，使用JavaScript监听滚动事件，当滚动到页面底部时，向服务器请求更多内容并更新页面。

2.使用Ajax实现无限下拉功能Ajax是一种使用XMLHttpRequest对象来异步地向服务器发送请求的技术。

使用Ajax可以实现页面无刷新加载数据，从而实现无限下拉功能。

当用户滚动到页面底部时，向服务器发送请求并获取更多数据，然后更新页面。

3.使用jQuery插件实现无限下拉功能jQuery是一种流行的JavaScript库，它简化了JavaScript编程。

许多插件可以帮助开发者快速实现无限下拉功能，例如`loadmore`插件。

使用这些插件可以大大减少开发时间和工作量。

三、总结jq实现页面无限下拉功能的方法有很多种，包括使用CSS、Ajax和jQuery插件等。

无论使用哪种方法，都可以提高用户体验和网站性能。

目录（篇2）1.页面无限下拉功能的需求分析2.jq实现页面无限下拉功能的实现方法3.总结和展望正文（篇2）一、页面无限下拉功能的需求分析页面无限下拉功能是指在页面加载时，初始显示部分内容，通过下拉页面，动态加载更多内容的功能。

这种功能在很多场景下都有应用，例如新闻滚动、商品列表等。

二、jq实现页面无限下拉功能的实现方法1.使用jq的滚动事件监听器，当页面滚动一定距离时，触发一个函数。

2.在这个函数中，使用ajax请求获取更多数据，并将数据动态添加到页面中。

jquery php 百度搜索框智能提示效果

jquery php 百度搜索框智能提示效果

jquery php 百度搜索框智能提示效果这个程序是利用php+ajax+jquery 实现的一个仿baidu智能提示的效果，有需要的朋友可以下载测试哦。

先来看看效果\代码如下index.html文件，保保存成index.htm代码如下复制代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Ajax Auto Suggest</title><script type="text/网页特效" src="jquery-1.2.1.pack.js"></script><script type="text/javascript">function lookup(inputString) {if(inputString.length == 0) {// Hide the suggestion box.$('#suggestions').hide();} else {$.post("rpc.php", {queryString: ""+inputString+""}, function(data){if(data.length >0) {$('#suggestions').show();$('#autoSuggestionsList').html(data);}});}} // lookupfunction fill(thisValue) {$('#inputString').val(thisValue);setTimeout("$('#suggestions').hide();", 200);}</script><style type="text/css教程"> body {font-family: Helvetica;font-size: 11px;color: #000;}h3 {margin: 0px;padding: 0px;}.suggestionsBox { position: relative;left: 30px;margin: 10px 0px 0px 0px; width: 200px; background-color: #212427; -moz-border-radius: 7px;-webkit-border-radius: 7px; border: 2px solid #000; color: #fff;}.suggestionList {margin: 0px;padding: 0px;}.suggestionList li {margin: 0px 0px 3px 0px; padding: 3px;cursor: pointer;}.suggestionList li:hover { background-color: #659CD8; }</style></head><body><div><form><div>Type your county:<br /><input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" /></div><div class="suggestionsBox" id="suggestions" style="display: none;"><img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" /> <div class="suggestionList" id="autoSuggestionsList">&nbsp;</div></div></form></div></body></html>php文件代码如下复制代码<?phpmysql教程_connect('localhost', 'root' ,'root');mysql_select_db("autoComplete");$queryString = $_POST['queryString'];if(strlen($queryString) >0) {$sql= "SELECT value FROM countries WHERE value LIKE '".$queryString."%' LIMIT 10";$query = mysql_query($sql);while ($result = mysql_fetch_array($query,MYSQL_BOTH)){$value=$result['value'];echo '<li onClick="fill(''.$value.'');">'.$value.'</li>';}}sql.sql把这里复制保存到你的数据库教程代码如下复制代码-- phpMyAdmin SQL Dump-- version 3.3.5-- ---- 主机: localhost-- 生成日期: 2010 年12 月09 日02:36-- 服务器版本: 5.0.22-- PHP 版本: 5.2.14SET SQL_MODE="NO_AUTO_V ALUE_ON_ZERO";/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8 */;---- 数据库: `autoComplete`---- ------------------------------------------------------------ 表的结构`countries`--CREATE TABLE IF NOT EXISTS `countries` (`id` int(6) NOT NULL auto_increment,`value` har(250) NOT NULL default '',PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=243 ;---- 转存表中的数据`countries`--INSERT INTO `countries` (`id`, `value`) V ALUES(1, 'Afghanistan'),(3, 'Albania'),(4, 'Algeria'),(5, 'American Samoa'),(6, 'Andorra'),(7, 'Angola'),(8, 'Anguilla'),(9, 'Antarctica'),(10, 'Antigua and Barbuda'), (11, 'Argentina'),(12, 'Armenia'),(13, 'Aruba'),(14, 'Australia'),(15, 'Austria'),(16, 'Azerbaijan'),(17, 'Bahamas'),(18, 'Bahrain'),(19, 'Bangladesh'),(20, 'Barbados'),(21, 'Belarus'),(22, 'Belgium'),(23, 'Belize'),(24, 'Benin'),(25, 'Bermuda'),(26, 'Bhutan'),(27, 'Bolivia'),(28, 'Bosnia and Herzegovina'), (29, 'Botswana'),(30, 'Bouvet Island'),(31, 'Brazil'),(32, 'British Indian Ocean territory'), (33, 'Brunei Darussalam'),(34, 'Bulgaria'),(35, 'Burkina Faso'),(36, 'Burundi'),(37, 'Cambodia'),(38, 'Cameroon'),(39, 'Canada'),(40, 'Cape Verde'),(41, 'Cayman Islands'),(42, 'Central African Republic'), (43, 'Chad'),(44, 'Chile'),(45, 'China'),(47, 'Cocos (Keeling) Islands'), (48, 'Colombia'),(49, 'Comoros'),(50, 'Congo'),(51, 'Congo'),(52, ' Democratic Republic'), (53, 'Cook Islands'),(54, 'Costa Rica'),(55, 'Ivory Coast (Ivory Coast)'), (56, 'Croatia (Hrvatska)'), (57, 'Cuba'),(58, 'Cyprus'),(59, 'Czech Republic'),(60, 'Denmark'),(61, 'Djibouti'),(62, 'Dominica'),(63, 'Dominican Republic'), (64, 'East Timor'),(65, 'Ecuador'),(66, 'Egypt'),(67, 'El Salvador'),(68, 'Equatorial Guinea'),(69, 'Eritrea'),(70, 'Estonia'),(71, 'Ethiopia'),(72, 'Falkland Islands'),(73, 'Faroe Islands'),(74, 'Fiji'),(75, 'Finland'),(76, 'France'),(77, 'French Guiana'),(78, 'French Polynesia'),(79, 'French Southern Territories'), (80, 'Gabon'),(81, 'Gambia'),(82, 'Georgia'),(83, 'Germany'),(84, 'Ghana'),(85, 'Gibraltar'),(86, 'Greece'),(87, 'Greenland'),(88, 'Grenada'),(89, 'Guadeloupe'),(91, 'Guatemala'),(92, 'Guinea'),(93, 'Guinea-Bissau'),(94, 'Guyana'),(95, 'Haiti'),(96, 'Heard and McDonald Islands'), (97, 'Honduras'),(98, 'Hong Kong'),(99, 'Hungary'),(100, 'Iceland'),(101, 'India'),(102, 'Indonesia'),(103, 'Iran'),(104, 'Iraq'),(105, 'Ireland'),(106, 'Israel'),(107, 'Italy'),(108, 'Jamaica'),(109, 'Japan'),(110, 'Jordan'),(111, 'Kazakhstan'),(112, 'Kenya'),(113, 'Kiribati'),(114, 'Korea (north)'),(115, 'Korea (south)'),(116, 'Kuwait'),(117, 'Kyrgyzstan'),(118, 'Lao People''s Democratic Republic'), (119, 'Latvia'),(120, 'Lebanon'),(121, 'Lesotho'),(122, 'Liberia'),(123, 'Libyan Arab Jamahiriya'),(124, 'Liechtenstein'),(125, 'Lithuania'),(126, 'Luxembourg'),(127, 'Macao'),(128, 'Macedonia'),(129, 'Madagascar'),(130, 'Malawi'),(131, 'Malaysia'),(132, 'Maldives'),(133, 'Mali'),(135, 'Marshall Islands'), (136, 'Martinique'),(137, 'Mauritania'),(138, 'Mauritius'),(139, 'Mayotte'),(140, 'Mexico'),(141, 'Micronesia'),(142, 'Moldova'),(143, 'Monaco'),(144, 'Mongolia'),(145, 'Montserrat'),(146, 'Morocco'),(147, 'Mozambique'),(148, 'Myanmar'),(149, 'Namibia'),(150, 'Nauru'),(151, 'Nepal'),(152, 'Netherlands'),(153, 'Netherlands Antilles'), (154, 'New Caledonia'), (155, 'New Zealand'),(156, 'Nicaragua'),(157, 'Niger'),(158, 'Nigeria'),(159, 'Niue'),(160, 'Norfolk Island'),(161, 'Northern Mariana Islands'), (162, 'Norway'),(163, 'Oman'),(164, 'Pakistan'),(165, 'Palau'),(166, 'Palestinian Territories'), (167, 'Panama'),(168, 'Papua New Guinea'), (169, 'Paraguay'),(170, 'Peru'),(171, 'Philippines'),(172, 'Pitcairn'),(173, 'Poland'),(174, 'Portugal'),(175, 'Puerto Rico'),(176, 'Qatar'),(177, 'Runion'),(179, 'Russian Federation'),(180, 'Rwanda'),(181, 'Saint Helena'),(182, 'Saint Kitts and Nevis'),(183, 'Saint Lucia'),(184, 'Saint Pierre and Miquelon'),(185, 'Saint Vincent and the Grenadines'),(186, 'Samoa'),(187, 'San Marino'),(188, 'Sao Tome and Principe'),(189, 'Saudi Arabia'),(190, 'Senegal'),(191, 'Serbia and Montenegro'),(192, 'Seychelles'),(193, 'Sierra Leone'),(194, 'Singapore'),(195, 'Slovakia'),(196, 'Slovenia'),(197, 'Solomon Islands'),(198, 'Somalia'),(199, 'South Africa'),(200, 'South Georgia and the South Sandwich Islands'), (201, 'Spain'),(202, 'Sri Lanka'),(203, 'Sudan'),(204, 'Suriname'),(205, 'Svalbard and Jan Mayen Islands'),(206, 'Swaziland'),(207, 'Sweden'),(208, 'Switzerland'),(209, 'Syria'),(210, 'Taiwan'),(211, 'Tajikistan'),(212, 'Tanzania'),(213, 'Thailand'),(214, 'Togo'),(215, 'Tokelau'),(216, 'Tonga'),(217, 'Trinidad and Tobago'),(218, 'Tunisia'),(219, 'Turkey'),(220, 'Turkmenistan'),(221, 'Turks and Caicos Islands'),(223, 'Uganda'),(224, 'Ukraine'),(225, 'United Arab Emirates'), (226, 'United Kingdom'), (227, 'United States of America'), (228, 'Uruguay'),(229, 'Uzbekistan'),(230, 'Vanuatu'),(231, 'Vatican City'),(232, 'Venezuela'),(233, 'Vietnam'),(234, 'Virgin Islands (British)'), (235, 'Virgin Islands (US)'), (236, 'Wallis and Futuna Islands'), (237, 'Western Sahara'), (238, 'Yemen'),(239, 'Zaire'),(240, 'Zambia'),(241, 'Zimbabwe');。

  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

当我们使用百度或是谷歌进行搜索时，只要输入一个字母就可以产生一个下拉列表，并且可以通过键盘上下键来控制列表项的选择。

最近在项目中也碰到了类似的情况，在文本框中输入某个字母就可以出现一个下拉列表，展现从数据库里搜索过来的结果。

AD：先说一下我的实现思路吧，当用户在文本框中输入时，可以利用ajax方式将文本框内内容传给后台的某个页面，在那个页面中经过处理后将产生的结果(这里的结果是一个字符串数组)再获取过来在前台呈现。

有了思路后就开始考虑怎么去具体实现吧。

首先要使用ajax的话，就想到可以使用jQuery提供的$.post()方法，这个方法可带4个参数，分别是：·url，请求的页面URL地址;·data(可选)，作为HTTP消息的实体内容发送给服务器;·callback(可选)，载入成功后的回调函数，自动将请求结果和状态传递给该方法;·type(可选)，服务器端返回的数据格式，可以是：xml、html、script、json等。

好，现在对$.post()方法有了一定的了解，现在就可以考虑这个方法该怎么来写了。

在我的项目中，请求的URL地址是@Url.Action("GetTags")(由于是 MVC架构，地址是由Routing配置产生的，这个转义到前台就是一个普通的URL地址)，需要传送的是ID为newTag的文本框中的值，所以第二个参数为{pinyins: $("#newTag").val()}，这里的pinyins是由后台定义的。

第三个参数callback是处理请求成功后要做的事，暂且命名为pinyinCallback，第四个参数设为'json'，即数据格式为一个JSON对象。

这样的话，这个ajax请求可以写为：1.$.post('@Url.Action("GetTags")', { pinyins: $("#newTag").val() }, pinyinCallback, 'json');但是如果用户每输入一个字母就立即往服务器传的的话，服务器的承载就会过大，于是考虑可以将每次请求延迟一秒发送，于是发送请求的方法可以这样定义：1.function pinyinOption() {2. var t = setTimeout(function () {3. $.post('@Url.Action("GetTags")', { pinyins: $("#newTag").val() }, pinyinCallback, 'json');4. }, 1000);5.6. }现在要考虑的就是这个方法在何时调用。

既然是以用户输入结果来查询的，那么可以考虑jQuery的keyup 事件，可以在文本框(id为newTag)的keyup事件触发后就调用之前定义的方法。

但是又考虑到这个功能中可以通过键盘中上下键来控制列表中的选项，所以这个keyup事件可以这样来定义：1.$("#newTag").keyup(function (e) {2. if (e.keyCode != 40 && e.keyCode != 38) {3.currentTxt = $("#newTag").val();4. pinyinOption();5. }6. }).focus(function () {7. this.select();8. });其中keyCode值38、40分别代表上键和下键。

currentTxt记录的是当前文本框的内容。

当请求成功后的回调函数pinyinCallback该做什么呢?这个回调函数该做的应该有这些事，首先要把请求来的数据在前台呈现出来，这样就需要创建一些新的DOM元素来装这些内容。

就不废话了，直接上代码吧：Html代码：1.<div class="mb20 pr f14 ff"id="tagDiv">2.<p><span>新标签</span> @Html.TextBox("newTag", null, new { style = "border: 1px solid #555;height: 20px;", autocomplete ="off"})3.<input type="submit"value="添加"/><span>@</span></p>4.</div>1.var $resultDiv = $('<div id="resultDiv"class="pa f12 ff"></div>');2. var $resultUl = $('<ul id="resultUl"></ul>');3. var $resultLi = [];4. var currentTxt;5.6. function pinyinCallback(data) {7. $("#resultDiv").show();8. $resultUl.html("");9. for (var i = 0; data[i]; i++) {10. $resultLi[i] = $("<li></li>");11. $resultLi[i].html(data[i]);12. $resultUl.append($resultLi[i]);13. }14. if ($resultUl.html() == "") {15. $("#resultDiv").hide();16. }17. $resultUl.appendTo($resultDiv);18. $resultDiv.appendTo($("#tagDiv"));19. }目前这个回调函数只是将请求回来的数据添加到创建的id为resultDiv的容器内，再将这个容器添加到页面中已存在的id为tagDiv的容器中。

而为了美观一点并为了实现点击一个列表项就提交的功能，这个回调函数还可以做这些工作：js代码：1.$("#resultDiv li").hover(function () {2. $(this).addClass("esultDivLiHover");3. }, function () {4. $(this).removeClass("esultDivLiHover");5. });6. $("#resultDiv").blur(function () {7. $("#resultDiv").hide();8. });9. $("#resultDiv li").click(function (event) {10. $("#newTag").val($(this).text());11. $("form").submit();12. });css代码：1.#resultDiv2. {3. left: 47px;4. border: 1px solid #000;5. background: #fff;6. z-index: 100;7. width: 200px;8.9. }10. #resultDiv li11. {12. cursor: default;13. padding: 2px 4px;14. }15. .esultDivLiHover16. {17. background: #cfcfcf;18. }在列表项被点击后就提交一次表单，并把当前文本框的内容设置为列表项的内容。

接下来就要实现键盘上下键控制的功能了，这样，全部的回调函数代码为：1.function pinyinCallback(data) {2. $("#resultDiv").show();3. $resultUl.html("");4.for (var i = 0; data[i]; i++) {5. $resultLi[i] = $("<li></li>");6. $resultLi[i].html(data[i]);7. $resultUl.append($resultLi[i]);8. }9.if ($resultUl.html() == "") {10. $("#resultDiv").hide();11. }12. $resultUl.appendTo($resultDiv);13. $resultDiv.appendTo($("#tagDiv"));14. $("#resultDiv li").hover(function () {15. $(this).addClass("esultDivLiHover");16. }, function () {17. $(this).removeClass("esultDivLiHover");18. });19. $("#resultDiv").blur(function () {20. $("#resultDiv").hide();21. });22. $("#resultDiv li").click(function (event) {23. $("#newTag").val($(this).text());24. $("form").submit();25. });26.//键盘上下键控制27.var index = -1; //标记上下键时所处位置28.29. document.documentElement.onkeydown = function (e) {30. e = window.event || e;31.if (e.keyCode == 40) { //下键操作32.if (++index == $("#resultDiv li").length) { //判断加一操作后index值是否超出列表数目界限33. index = -1; //超出的话就将index值变为初始值34. $("#newTag").val(currentTxt); //并将文本框中值设为用户用于搜索的值35. $("#resultDiv li").removeClass("esultDivLiHover");36. }37.else {38. $("#newTag").val($($("#resultDiv li")[index]).text());39. $($("#resultDiv li")[index]).siblings().removeClass("esultDivLiHover").end().addClass("esultDivLiHover");40. }41. }42.if (e.keyCode == 38) { //上键操作43.if (--index == -1) { //判断自减一后是否已移到文本框44. $("#newTag").val(currentTxt);45. $("#resultDiv li").removeClass("esultDivLiHover");46. }47.else if (index == -2) { //判断index值是否超出列表数目界限48. index = $("#resultDiv li").length - 1;49. $("#newTag").val($($("#resultDiv li")[index]).text());50. $($("#resultDiv li")[index]).siblings().removeClass("esultDivLiHover").end().addClass("esultDivLiHover");51. }52.else {53. $("#newTag").val($($("#resultDiv li")[index]).text());54. $($("#resultDiv li")[index]).siblings().removeClass("esultDivLiHover").end().addClass("esultDivLiHover");55. }56. }57. };58. }OK，现在这个功能就差不多搞定了，在ie6下也是完全正常，不过还是有一些bug需要改进，另外这个方法还是有可以优化的地方吧。

相关文档
最新文档