html仿百度搜索框,JS实现仿google、百度搜索框输入信息智能提示的实现方法

本文实例讲述了JS实现仿google、百度搜索框输入信息智能提示的实现方法。分享给大家供大家参考。具体如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

仿google、百度搜索框输入信息智能提示的实现

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;

}

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 = "

s += " οnmοuseοut=\"javascript:suggestOut(this);\" ";

s += " οnclick=\"javascript:setSearch('" + sourceText + "','" + sourceValue + "');\" ";

s += " class=\"suggest_link\" >" + sourceText + "

";

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);

}

class="input_out" οnfοcus="this.className='input_on';this.οnmοuseοut=''"

οnblur="this.className='input_off';this.οnmοuseοut=function(){this.className='input_out'};"

οnmοusemοve="this.className='input_move'" οnmοuseοut="this.className='input_out'" />

服务器端C#代码

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;

}

}

///

/// 获取数据源的方法

///

/// 数据源

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程序设计有所帮助。