<!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/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="file:///C|/Documents and Settings/Administrator/桌面/jquery-1.8.3.js"></script>
<style>
.autosearch{
border:1px solid #999;
width:160px;
position:relative;
}
.autosearch input{
border:none;
padding:3px;
font-size:12px;
color:#666;
width:154px
}
.liNormal, .liHover{ font-size:12px; padding-left:5px; height:18px; line-height:18px; overflow: hidden;}
.liHover{ background:#EEE}
</style>
</head>
<body>
<div class="autosearch">
<input type="text" value='请输入品牌名称...' id="a" />
</div>
<script>
/*
* 搜索提示
* **made by keimon**
* *****2012-01-22*****
*/
var jsonData = [{"id":"453","value":"2AM"},{"id":"955","value":"33333"},{"id":"554","value":"37°"},{"id":"152","value":"3E(? Ш E)"},{"id":"347","value":"4YOU"},{"id":"75","value":"5th STREET"},{"id":"166","value":"7princess"},{"id":"953","value":"<>b<\/b>"},{"id":"24","value":"A205"},{"id":"80","value":"ABS"},{"id":"839","value":"Accoona(雅珂妮)"},{"id":"949","value":"测试一下"},{"id":"950","value":"测试一下"},{"id":"915","value":"淑女屋"},{"id":"295","value":"莎玛斯"},{"id":"130","value":"蓝色多瑙河"},{"id":"162","value":"蜜丝佛陀(MAX FACTOR)"},{"id":"105","value":"郑明明-菲莲"},{"id":"548","value":"酷比熊"},{"id":"47","value":"金加瀛"},{"id":"415","value":"金格尔"},{id":"369","value":"马克西姆"},{"id":"195","value":"～H2O+(水芝澳)"}];
// input框中显示或隐藏默认文字；
$("#a").focus(function(){
if($(this).val()==this.defaultValue){
$(this).val("");
}
})
$("#a").blur(function(){
if($(this).val()==""){
$(this).val(this.defaultValue);
}
})
//input框搜索提示；
function test(inputObj,jsonData){
// 设置元素样式
function setStyle(elem,prop){
// var old = {};
for(var i in prop){
// old[i]=elem.style[i];
elem.style[i] = prop[i];
}
// return old;
}
//对json数据的处理，jsondata是json数据，inputValue是json的value中所包含的值，maxLen是获得数据的最大值；
function getDataArr(jsonData,inputValue,maxLen){
var data = eval(jsonData);
var arr = [];
if(inputValue==""){
return;
}
for(var i=0; i<data.length; i++){
if(jsonData[i].value.indexOf(inputValue)!=-1){
arr[arr.length]=jsonData[i];
if(arr.length==20){
return arr;
}
}
}
return arr;
}
//inputObj是传入进来的input的jquery对象
var targetInput = inputObj;
/*
var hiddenObj = document.createElement("input");
hiddenObj.type="hidden";
hiddenObj.id = "hidden"+targetInput.get(0).id;
hiddenObj.name = hiddenObj.id;
*/
var InputOriginalVal = targetInput.val();
var parentDiv = targetInput.get(0).parentNode;
// parentDiv.appendChild(hiddenObj);
var divWidth = $(parentDiv).width();
var divHeight = $(parentDiv).height();
var ulObj = document.createElement("ul");
ulObj.id = "ul"+ targetInput.get(0).id;
parentDiv.appendChild(ulObj);
var ulStyle = {
position: 'absolute',
top: divHeight,
left: -1 + 'px',
margin: 0,
padding: '5px 0 5px 0',
width: divWidth,
height: 'auto',
zIndex: '99999',
border: '1px solid #999',
cursor: 'pointer',
display: 'none',
background:'#fff'
};
setStyle(ulObj,ulStyle);
$(ulObj).css("width",divWidth+"px"); //兼容ff；
//键盘上上下左右，tab，回车键的操作
targetInput.keydown(function(e){
var keyCode = e.keyCode;
//输入不是37、38、39、40、13
if (keyCode !== 37 && keyCode !== 38 && keyCode !== 39 && keyCode !== 40 && keyCode !== 9 && keyCode !== 13) {
// 鼠标释放200ms后，创建下拉区域，并将匹配项放在下拉区域中。
window.setTimeout(function () {
mainFun(e)
}, 200)
}
// 37为向左箭头，38为向上箭头，39为向右箭头，40为向下箭头
if (keyCode == 37 || keyCode == 38 || keyCode == 39 || keyCode == 40) {
var liArr = ulObj.childNodes;
var liLen = liArr.length;
if(liLen==0){
return;
}
if(!$('.liHover')[0]){
$(liArr[0]).addClass("liHover");
showInputVal(targetInput,liArr,0)
return;
}
var highObj = $(".liHover")[0];
var highIndex = $(liArr).index($(highObj));
// 向左、向上箭头
if (keyCode == 37 || keyCode == 38) {
if(highIndex==0){
return;
}
$(liArr).removeClass("liHover");
$(liArr[highIndex-1]).addClass("liHover");
showInputVal(targetInput,liArr,highIndex-1)
}
// 向右、向下箭头
if (keyCode == 39 || keyCode == 40) {
if(highIndex==liLen-1){
return;
}
$(liArr).removeClass("liHover");
$(liArr[highIndex+1]).addClass('liHover');
showInputVal(targetInput,liArr,highIndex+1)
}
}
if (keyCode == 9 || keyCode == 13) {
$(ulObj).hide()
}
})
//input在用键盘输入时的事件
function mainFun(e){
var inputVal = targetInput.val();
var resultArr = getDataArr(jsonData,inputVal,20);
var liStr = "";
if(resultArr!=null){
var arrLength = resultArr.length;
for(var i=0; i<arrLength; i++){
liStr += '<li hidid=' + resultArr[i].id + ' style="padding-left:5px; height:18px; line-height:18px; overflow:hidden; font-size:12px" id=' + 'li' + targetInput.get(0).id + i + '>' + resultArr[i].value + '</li>';
}
}
$(ulObj).html(liStr);
$(ulObj).show();
var liArr = ulObj.childNodes;
var liLen = liArr.length;
$(liArr).mouseenter(function(){
$(liArr).removeClass("liHover");
$(this).addClass("liHover");
})
}
//根据提示的信息（ul中内容），显示在input中；
function showInputVal(inputObj,liArr,index){
var liVal = $(liArr[index]).html();
inputObj.val(liVal);
}
targetInput.keyup(function(){
if(targetInput.val()==""||targetInput.val()==InputOriginalVal){
$(ulObj).hide();
}
})
//页面点击时的进行的处理
$(document).click(function(e){
var target = e.target;
var targetName = target.nodeName;
//alert(targetName.toLowerCase())
if(targetName.toLowerCase()!="li"){
$(ulObj).hide();
}else{
var liArr = ulObj.childNodes;
var highObj = $(".liHover")[0];
var highIndex = $(liArr).index($(highObj));
showInputVal(targetInput,liArr,highIndex);
$(ulObj).hide();
}
})
}
var a = $("#a")
test(a,jsonData)
</script>
</body>
</html>
相关推荐
**Google搜索提示功能详解** Google搜索提示，也称为搜索下拉菜单或自动完成，是Google搜索引擎提供的一项增强用户体验的功能。当用户在搜索框中输入关键词时，系统会根据已有的搜索记录和流行趋势，实时推荐与输入...
【标题】"用jsp实现的搜索提示功能"是关于在Web开发中利用JavaServer Pages (JSP) 技术创建一个交互式的搜索建议系统。这个系统通常会在用户输入查询时提供实时的搜索提示，增强用户体验并提高搜索效率。 【描述】...
在网页开发中，Ajax（Asynchronous JavaScript and XML）技术被广泛应用于实现动态、无刷新的交互体验，其中一个常见的应用场景就是搜索提示功能。该功能能够显著提升用户体验，当用户在搜索框输入关键词时，系统...
本文将深入探讨“C#搜索提示代码”的核心概念和实现方法，这通常涉及到用户输入实时建议和自动补全功能。 搜索提示代码在用户输入查询时提供即时反馈，提高用户体验并减少输入错误。在C#中，我们可以利用事件处理、...
**jQuery智能搜索提示框**是基于JavaScript库jQuery实现的一种交互式搜索功能，它可以在用户输入时动态显示与输入内容匹配的建议结果。这种技术在网页应用中非常常见，可以极大地提升用户体验，使得用户能快速找到...
**jQuery与Layui下拉框搜索提示列表详解** 在Web开发中，用户界面的交互性和易用性是至关重要的。jQuery与Layui结合，可以实现高效且美观的前端功能，例如下拉框的搜索提示列表。这个功能允许用户在输入框中输入...
在IT行业中，搜索引擎的搜索提示功能是一个非常重要的用户体验优化元素，尤其像谷歌这样的全球领先搜索引擎。这个"谷歌式搜索提示，后台接口基本实现"的资源旨在帮助开发者理解并实现类似谷歌的实时搜索建议功能。...
标题中的“类似百度搜索提示功能”指的是网页中常见的自动补全或自动建议功能，这种功能在用户输入查询词时提供即时的搜索建议，类似于百度搜索引擎的用户体验。这一特性在许多网站和应用程序中都有应用，目的是提高...
jQuery百度搜索提示框效果代码是一种常见的前端开发技术，它用于实现类似百度搜索引擎那样的实时搜索建议功能。这个功能在用户输入关键词时，会在输入框下方显示与输入内容匹配的相关搜索建议，提升用户的搜索体验。...
在网页开发中，提供高效的搜索提示功能是提升用户体验的关键因素之一。`jq-Autocomplete-master` 是一个优秀的JavaScript插件，它模仿了百度搜索引擎的智能提示功能，使得用户在输入搜索关键词时可以快速获得相关的...
在本项目中，"jQuery百度搜索提示框效果代码.zip"是一个包含实现百度搜索提示效果的JavaScript代码资源。这个效果主要用于提升用户体验，当用户在输入框中输入内容时，系统会实时显示与输入内容相关的建议搜索项，...
标题中的“搜索提示功能”指的是在用户输入查询时，搜索引擎会自动显示可能的搜索建议，以帮助用户更快地找到他们想要的信息。这种功能通常基于用户的输入关键字、热门搜索趋势以及历史搜索数据。在Google中，这个...
Ajax 搜索提示功能是一种常见的交互设计，它能够在用户输入搜索关键词时提供实时的建议或预测，提高用户体验。这个功能通常结合 JavaScript 和 AJAX 技术实现，与服务器端的 PHP 或其他后端语言进行通信。在本案例中...
又一个Ajax+ASP输入框搜索提示，带Access数据库，本程序亮点是它可以根据你输入的关键词判断数据库是否已经存在，若不存在就将此关键词写入数据库，这样实际上是由用户帮你充实的资料库；本程序没有用到AJAX框架，...
**Ajax 实现仿百度搜索提示（Suggestion）** 在网页开发中，为了提供更好的用户体验，我们经常需要实现类似百度搜索的实时提示功能。这个功能在用户输入查询词时，能够实时展示与输入相关的建议，无需点击搜索按钮...
智能搜索提示功能是一种常见于各种软件和Web应用中的特性，它极大地提高了用户输入查询的效率和准确性。在本文中，我们将深入探讨智能搜索提示功能的工作原理、实现方式以及相关技术。 1. 搜索提示的基本概念 智能...
在IT行业中，Ajax（Asynchronous JavaScript and XML）技术被广泛应用于网页交互，特别是在实现动态搜索提示功能时。这个“ajax搜索提示PHP”项目显然旨在创建一个类似Google或迅雷的实时搜索建议系统，用户在输入...
【Ajax仿Google搜索提示Asp数据库版 - ASP源码】是一个基于ASP技术实现的搜索提示功能，它模拟了Google搜索引擎的实时搜索建议效果。在网页中输入关键字时，该功能能够快速从数据库中检索相关数据，并实时显示为下拉...
在用户输入时提供实时搜索提示是提升用户体验的重要手段，这通常涉及到Ajax技术。Ajax，即异步JavaScript和XML，允许网页在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。在描述中提到了ibatis和...
在IT行业中，搜索提示功能是用户界面中一个非常重要的组件，尤其在搜索引擎或者大型网站中，它极大地提高了用户的搜索效率和用户体验。这个功能通常被称为自动补全或预测搜索，其核心目的是在用户输入关键词时，系统...