JS实现仿google、百度搜索框输入信息智能提示的实现方法
更新时间：2015年04月20日 16:17:41 作者：两把刷子
这篇文章主要介绍了JS实现仿google、百度搜索框输入信息智能提示的实现方法,实例分析了javascript实现智能提示功能的技巧,非常具有实用价值,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
这篇文章主要介绍了JavaScript Array对象使用方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
这篇文章主要介绍了JS实现拖拽的方法,结合实例形式分析了JS拖拽的实现原理、实现技巧与相关注意事项,需要的朋友可以参考下2016-12-12
关于JavaScript小数进行加、减、乘、除出现多位小数问题，自己研究了一下，而且作了相关的测试，收获不少知识点，需要的朋友可以参考下2015-10-10
这篇文章主要为大家详细介绍了JavaScript实现简易计算器案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下<BR>2022-07-07
这篇文章主要来和大家详细介绍一下JavaScript中map和parseInt的用法，文中的示例代码讲解详细，具有一定的学习价值，感兴趣的小伙伴可以了解一下2023-05-05
这篇文章主要给大家介绍了关于typescript中正则表达式的常用使用方法,TypeScript是一种静态类型的JavaScript超集,它提供了对正则表达式的全面支持,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11
这篇文章主要为大家详细介绍了bootstrap table单元格新增行并编辑的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
下面小编就为大家带来一篇浅谈js键盘事件全面控制。小编觉得挺不错的，在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-12-12
本文主要介绍了JavaScript数组方法reduce的概述、语法、参数、工作原理等，由浅入深，便于理解。需要的朋友可以看下2016-12-12
纯js实现在img图片大小未知，div大小未知的情况下，让图片自适应大小,需要的朋友可以参考下2014-06-06
最新评论