JS实现仿google、百度搜索框输入信息智能提示的实现方法
本文实例讲述了JS实现仿google、百度搜索框输入信息智能提示的实现方法。分享给大家供大家参考。具体如下：
<!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>
<title>仿google、百度搜索框输入信息智能提示的实现</title>
<style type="text/css" media="screen">
body
{
font: 11px arial;
}
.suggest_link
{
width:120px;
background-color: #FFFFFF;
padding: 2px 6px 2px 6px;
}
.suggest_link_over
{
width:120px;
background-color: #E8F2FE;
padding: 2px 6px 2px 6px;
}
#suggestResult
{
position: absolute;
background-color: #FFFFFF;
text-align: left;
border: 1px solid #000000;
}
/*input*/
.input_on
{
padding: 2px 8px 0pt 3px;
height: 18px;
border: 1px solid #999;
background-color: #FFFFCC;
}
.input_off
{
padding: 2px 8px 0pt 3px;
height: 18px;
border: 1px solid #CCC;
background-color: #FFF;
}
.input_move
{
padding: 2px 8px 0pt 3px;
height: 18px;
border: 1px solid #999;
background-color: #FFFFCC;
}
.input_out
{
/*height:16px;默认高度*/
padding: 2px 8px 0pt 3px;
height: 18px;
border: 1px solid #CCC;
background-color: #FFF;
}
</style>
<script language="javascript" type="text/javascript">
var $ = document.getElementById;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
var obj;
if (window.XMLHttpRequest) { //Mozilla 浏览器
obj = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
try {
obj = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
obj = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) { }
}
}
return obj;
}
//当输入框的内容变化时，调用该函数
function searchSuggest() {
var inputField = $("txtSearch");
var suggestText = $("suggestResult");
if (inputField.value.length > 0) {
var o = createXMLHttpRequest();
var url = "SearchResult.ashx?searchText=" + escape(inputField.value);
o.open("GET", url, true);
o.onreadystatechange = function () {
if (o.readyState == 4) {
if (o.status == 200) {
var sourceItems = o.responseText.split("\n");
if (sourceItems.length > 1) {
suggestText.style.display = "";
suggestText.innerHTML = "";
for (var i = 0; i < sourceItems.length - 1; i++) {
var sourceText = sourceItems[i].split("@")[1];
var sourceValue = sourceItems[i].split("@")[0];
var s = "<div onmouseover=\"javascript:suggestOver(this);\" ";
s += " onmouseout=\"javascript:suggestOut(this);\" ";
s += " onclick=\"javascript:setSearch('" + sourceText + "','" + sourceValue + "');\" ";
s += " class=\"suggest_link\" >" + sourceText + "</div>";
suggestText.innerHTML += s;
}
}
else {
suggestText.style.display = "none";
}
}
}
}; //指定响应函数
o.send(null); // 发送请求
}
else {
suggestText.style.display = "none";
}
}
function delayExecute() {
$("valueResult").value = "";
window.setTimeout(function () { searchSuggest() }, 800);
//延时处理
}
function suggestOver(div_value) {
div_value.className = "suggest_link_over";
}
function suggestOut(div_value) {
div_value.className = "suggest_link";
}
function setSearch(a, b) {
$("txtSearch").value = a;
$("valueResult").value = b;
var div = $("suggestResult");
div.innerHTML = "";
div.style.display = "none";
}
function showResult() {
alert($("txtSearch").value + $("valueResult").value);
}
</script>
</head>
<body>
<form id="form1" action="">
<input type="text" id="txtSearch" name="txtSearch" onkeyup="delayExecute();" size="20"
class="input_out" onfocus="this.className='input_on';this.onmouseout=''"
onblur="this.className='input_off';this.onmouseout=function(){this.className='input_out'};"
onmousemove="this.className='input_move'" onmouseout="this.className='input_out'" />
<input type="hidden" id="valueResult" name="valueResult" value="" />
<br />
<div id="suggestResult" style="display: none">
</div>
<br/>
<input id="button1" type="button" value="提交" onclick="showResult();" />
</form>
</body>
</html>
服务器端C#代码
<%@ WebHandler Language="C#" Class="SearchResult" %>
using System;
using System.Web;
using System.Data;
public class SearchResult : IHttpHandler {
public void ProcessRequest (HttpContext context) {
object QueryWord=context.Request.QueryString["searchText"];
if (QueryWord != null)
{
if (QueryWord.ToString().Trim().Length > 0)
{
DataTable dt = getDB();
string returnText = "";
if (dt != null && dt.Rows.Count > 0)
{
DataRow[] dr = dt.Select(" name like '%" + QueryWord .ToString()+ "%' ");
if (dr.Length > 0)
{
for (int i = 0; i < dr.Length; i++)
{
//可设置返回多字符串
returnText += dr[i]["id"].ToString() + "@" + dr[i]["name"].ToString() + "\n";
}
}
}
context.Response.Write(returnText);
context.Response.End();
}
}
}
public bool IsReusable {
get {
return false;
}
}
/// <summary>
/// 获取数据源的方法
/// </summary>
/// <returns>数据源</returns>
private DataTable getDB()
{
DataTable dt = new DataTable();
dt.Columns.Add("id");
dt.Columns.Add("name");
dt.Columns.Add("age");
dt.Rows.Add(new object[] { "000001", "张三", "26" });
dt.Rows.Add(new object[] { "000002", "张晓", "26" });
dt.Rows.Add(new object[] { "000003", "张岚", "27" });
dt.Rows.Add(new object[] { "000004", "李四", "25" });
dt.Rows.Add(new object[] { "000005", "李星", "27" });
return dt;
}
}
希望本文所述对大家的javascript程序设计有所帮助。
相关推荐
-
js模拟百度模糊搜索的实例
废话不多说,直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; } input{ display:block; list-style:none; } html,body{ color:#0
-
模拟一个类似百度google的模糊搜索下拉列表
复制代码 代码如下: // JavaScript Document function onChangehoverLi(thisLi){ $("#searchtext").val($(thisLi).html()); $("#suggest_ul").hide(0); validateform2(); } $(function(){ //载入时隐藏下拉li $("#suggest_ul").hide(0); }); //Ajax 动态获取关键字 /
-
js实现百度搜索提示框
效果如下所示 话不多说,请看代码: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>百度搜索提示框</title> <style> * { margin: 0;padding: 0; outline: none;} .search101 { width: 650px; margin: 300px auto; font-size: 0
-
JS仿百度自动下拉框模糊匹配提示
实际项目中,我们可以把数据获取改成ajax动态获取,在 getContent()中 <!DOCTYPE> <html> <head> <title>js/jQuery实现类似百度搜索功能</title> <meta name="Author" content="Michael"> <meta name="Keywords" content="js/jQuery
-
JS实现仿google、百度搜索框输入信息智能提示的实现方法
本文实例讲述了JS实现仿google.百度搜索框输入信息智能提示的实现方法.分享给大家供大家参考.具体如下: <!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&qu
-
基于Vue.js 2.0实现百度搜索框效果
使用Vue.js 2.0 模仿百度搜索框效果,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=2.0, maximum-scale=1.0, minimum
-
js文本框输入内容智能提示效果
本文实例讲述了js文本框输入内容智能提示效果代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 大体思路: 1.监听文本框事件.这里是用的keyup事件.大家可以尝试用onchange事件.不过感觉keyup事件的效果要好一点. 2.根据输入内容通过ajax异步的方式去访问后台数据. 3.遍历返回数据将数据添加到显示区域. 4.在添加数据的同时给每一条数据加上一些效果,点击其中一条将数据填到文本框,并且提示内容消失. 5.后台数据应该拼接成json格式. 具体代码如下: <!DOCTYP
-
JavaScript实现百度搜索框效果
最近做了个百度搜索框今天给大家分享下. 效果: 1.当进入界面时,自动调用方法,获取当前的时间,并且实时更新时间. 2.点击页面头部的换肤,自动更换背景图片 3.鼠标点击搜索框的时候自动显示用户上次搜索的内容, 4.当鼠标放在用户上次搜索的内容的时候搜索框的内容变成鼠标悬浮的内容上 5.在搜索框中按回车的时候自动录入为上次输入的内容中,若本次内容和上次内容相同则不显示 6.点击百度一下按钮自动录入搜索框中的内容为上次搜索的内容 界面: 界面html代码: <!DOCTYPE html> <
-
使用 Vue.js 仿百度搜索框的实例代码
整理文档,搜刮出一个使用 Vue.js 仿百度搜索框的实例代码,稍微整理精简一下做下分享. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue demo</title> <style type="text/css"> .bg { background: #ccc; } </style> <s
-
JS仿淘宝搜索框用户输入事件的实现
淘宝是我们经常用的一个网上购物平台,打开淘宝网首页,找到淘宝首页的搜索框,如下如所示: 大家可以看到,当页面一打开,搜索框中就可以看到灰色字体"少女高跟鞋",还有闪烁的光标.当用户点击输入的时候,灰色字消失.当用户清空文本框的所有内容的时候,灰色字自动恢复. 接下来,这个小案例就是要介绍如何实现这种效果,即用户输入事件. 判断用户输入的事件有 oninput 和onpropertychange .当然,想必你能想到,由于浏览器兼容的问题,他们出现的场合有所不同. 正常浏览器支持onin
-
jQuery 插件仿百度搜索框智能提示(带Value值)
因公司需要做一个仿百度搜索框,并且带Value值的, 网上找了下只有Text, 都没带Value的 所以做了个. 直接贴代码. 复制代码 代码如下: (function($) { var timeid; var lastValue; var options; var c; var d; var t; $.fn.autoComplete = function(config) { c = $(this); var defaults = { width: c.width(), //提示框的宽度 默认跟
-
JS实现百度搜索框
本文实例为大家分享了JS实现百度搜索框的具体代码,供大家参考,具体内容如下 实现原理 向输入框动态输入时关键词,将当前关键词作为问号参数后面的值,因为要跨域使用百度的接口,所以通过 JSONP 跨域创建 Ajax 请求.回调函数处理返回值. 尝试研究了一下百度的接口,发现原生的 XHR 接口参数有点复杂(百度应该是考虑了很多情况). 找了一个 2345 导航,在输入框随便输入一个字母 s,打开 Network,发现它也是向百度的一个地址发送了请求,其中问号后面的'&wd=s'发送的就是此关键词,
-
JS模拟百度搜索框和选项卡的实现
目录 练习1 练习2,选项卡,详细代码如下: 练习1 实现搜索框内,输入相关数字,在下方显示相关内容,模拟百度搜索,详细代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &l
-
JS实现百度搜索框关键字推荐
本文实例为大家分享了JS实现百度搜索框关键字推荐的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box { width: 450px; margin: 200px auto; } #txt { width: 3