<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>js/jQuery实现类似百度搜索功能</title>
<meta name="Author" content="Michael">
<meta name="Keywords" content="js/jQuery实现类似百度搜索功能">
<meta name="Description" content="js/jQuery实现类似百度搜索功能,可用键盘控制">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
#container input{
border:solid #87A900 2px;
width:288px;
height:30px;
font-size:16px;
padding:0 5px;
line-height:30px;
}
#container .item{
padding:3px 5px;
cursor:pointer;
}
#container .addbg{
background:#87A900;
}
#container .first{
width:300px;
}
#container .append{
border:solid #87A900 2px;
border-top:0;
display:none;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<div class="first"><input class="kw" onKeyup="getContent(this);" /></div>
<div class="append"></div>
</div>
</div>
<script type="text/javascript">
var data = [
"你好，我是Michael",
"你是谁",
"你最好啦",
"你最珍贵",
"你是我最好的朋友",
"你画我猜",
"你是笨蛋",
"你懂得",
"你为我着迷",
"你是我的眼"
];
$(document).ready(function(){
$(document).keydown(function(e){
e = e || window.event;
var keycode = e.which ? e.which : e.keyCode;
if(keycode == 38){
if(jQuery.trim($(".append").html())==""){
return;
}
movePrev();
}else if(keycode == 40){
if(jQuery.trim($(".append").html())==""){
return;
}
$(".kw").blur();
if($(".item").hasClass("addbg")){
moveNext();
}else{
$(".item").removeClass('addbg').eq(0).addClass('addbg');
}
}else if(keycode == 13){
dojob();
}
});
var movePrev = function(){
$(".kw").blur();
var index = $(".addbg").prevAll().length;
if(index == 0){
$(".item").removeClass('addbg').eq($(".item").length-1).addClass('addbg');
}else{
$(".item").removeClass('addbg').eq(index-1).addClass('addbg');
}
}
var moveNext = function(){
var index = $(".addbg").prevAll().length;
if(index == $(".item").length-1){
$(".item").removeClass('addbg').eq(0).addClass('addbg');
}else{
$(".item").removeClass('addbg').eq(index+1).addClass('addbg');
}
}
var dojob = function(){
$(".kw").blur();
var value = $(".addbg").text();
$(".kw").val(value);
$(".append").hide().html("");
}
});
function getContent(obj){
var kw = jQuery.trim($(obj).val());
if(kw == ""){
$(".append").hide().html("");
return false;
}
var html = "";
for (var i = 0; i < data.length; i++) {
if (data[i].indexOf(kw) >= 0) {
html = html + "<div class='item' onmouseenter='getFocus(this)' onClick='getCon(this);'>" + data[i] + "</div>"
}
}
if(html != ""){
$(".append").show().html(html);
}else{
$(".append").hide().html("");
}
}
function getFocus(obj){
$(".item").removeClass("addbg");
$(obj).addClass("addbg");
}
function getCon(obj){
var value = $(obj).text();
$(".kw").val(value);
$(".append").hide().html("");
}
$(function(){
$c = $(".append");
$c.hide();
$(".input1").on({
"click" : function() {
$c.toggle();
return false;
}
});
$(document).on({
"click" : function(e) {
var src = e.target;
if (src.id && src.id === "c") {
return false;
} else {
$c.hide();
}
}
});
})
</script>
</body>
</html>
分享到：
相关推荐
`jq-Autocomplete-master` 是一个优秀的JavaScript插件，它模仿了百度搜索引擎的智能提示功能，使得用户在输入搜索关键词时可以快速获得相关的建议结果。这款插件基于广泛使用的jQuery库，因此易于集成到任何使用...
标题中的“类似百度搜索提示功能”指的是网页中常见的自动补全或自动建议功能，这种功能在用户输入查询词时提供即时的搜索建议，类似于百度搜索引擎的用户体验。这一特性在许多网站和应用程序中都有应用，目的是提高...
百度搜索作为中国最大的搜索引擎之一，其模糊提示功能深受用户喜爱，因为它能够快速帮助用户找到可能的搜索词，提高输入效率。在这里，我们将详细探讨“模仿百度搜索模糊提示”的实现原理和技术要点。 一、搜索提示...
在IT行业中，创建一个"漂亮的仿百度百度搜索提示"是一个常见的需求，这涉及到前端开发、用户体验设计以及数据处理等多个方面。下面将详细讲解这个主题所涵盖的知识点。 首先，前端开发是实现这一功能的核心环节。这...
在本项目中，"jQuery百度搜索提示框效果代码.zip"是一个包含实现百度搜索提示效果的JavaScript代码资源。这个效果主要用于提升用户体验，当用户在输入框中输入内容时，系统会实时显示与输入内容相关的建议搜索项，...
"搜索提示效果，模仿百度搜索框"意味着这个代码复现了百度搜索框的智能提示功能，即根据用户输入的关键字实时生成并展示相关的搜索建议。 【标签】："搜索提示源码"这一标签明确了这个压缩包的内容，主要关注的是...
本项目"jquery实现百度搜索关键字输入下拉框提示"是利用 jQuery 实现类似百度搜索框的功能，即用户在输入框中输入关键词时，能实时显示与关键词相关的下拉提示，提高用户的搜索体验。 首先，`index.html` 是网页的...
当我们谈论"PHP仿百度搜索提示"时，我们实际上是指利用PHP实现类似百度搜索引擎的自动补全功能。这个功能通常结合JavaScript（前端）和MySQL（数据库）一起工作，为用户提供实时的搜索建议，提高搜索效率和用户体验...
本项目是使用JSP技术实现的一个Ajax自动提示功能，其目的是模拟百度搜索引擎的搜索提示效果。 首先，我们需要理解Ajax（Asynchronous JavaScript and XML）的核心理念。Ajax并非一种新技术，而是通过JavaScript、...
【标题】"仿百度搜索提示框"涉及到的技术和知识点主要包括前端界面设计、后端服务器处理、数据库交互以及异步数据加载。以下是对这些关键领域的详细解释： 1. 前端界面设计： 这部分主要是创建一个与百度搜索框...
在Android应用开发中，创建一个类似百度搜索提示框的功能是一项常见的需求。这个功能不仅可以提高用户的交互体验，还能帮助用户快速找到他们想要搜索的信息。在这个项目中，我们将关注如何在Android平台上实现一个仿...
jQuery百度搜索提示框效果代码，在输入框输入时，会根据输入的内容模糊查询相关的做成下拉框显示在下面，jQuery百度搜索提示框效果代码，在输入框输入时，会根据输入的内容模糊查询相关的做成下拉框显示在下面
本文将深入探讨“百度搜索框推荐提示功能”的实现原理和相关技术，主要涉及HTML、CSS以及JS这三个核心Web开发技术。 首先，我们要明白搜索框提示功能的基本工作流程。当用户在搜索框中输入文字时，系统会实时分析...
模拟实现百度搜索框提示效果，自己用js动态创建、移除div来实现的，很简单 注释详细。
【标题】：“模仿百度搜索提示”这一项目是基于JavaScript、Ajax、JSON以及Servlet技术实现的，旨在创建一个类似于百度搜索引擎的自动提示功能。这个功能在用户输入关键字时，能够实时从服务器获取匹配的搜索建议，...
在这个实例中，可能会有一个`<title>`标签来设置页面标题为"百度搜索框"，以及引用外部CSS和JS文件的`<link>`和`<script>`标签。 2. `<body>`标签：包含网页的实际内容。搜索框通常由`<form>`标签定义，其中包含一...
这个文件名可能代表一个与百度搜索提示框效果相关的资源或代码库，可能是开发者用于实现类似功能的示例代码、测试数据或者相关教程。由于具体文件内容未知，我们只能推测它可能包含了实现搜索提示框效果的技术细节，...
总结来说，"jQuery 仿百度搜索功能"是一种结合了前端jQuery库和后端Struts2框架的实现方案，通过实时Ajax交互，为用户提供类似百度搜索的智能提示体验。开发者可以根据自身项目需求，自定义样式和搜索逻辑，以实现更...
本主题聚焦于“调用百度搜索，实现智能提示”，这是一个利用API接口技术来提升用户体验的重要方法。下面我们将深入探讨这个话题，了解如何通过调用百度搜索API来实现智能提示，并探讨其背后的技术原理和实际应用。 ...
标题中的“百度输入框智能提示”指的是百度搜索框中的一项智能功能，它通过实时分析用户在输入框中键入的关键词，提供相关的搜索建议，帮助用户快速找到目标信息。这项功能是基于大数据和人工智能技术实现的，对于...