<!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></title>
<style type="text/css">
#container
{
400px;
margin:200px auto;
}
#txtSearch
{
300px;
}
#divwd
{
300px;
border:1px solid gray;
}
#divwd ul
{
list-style-type:none;
margin:0px;
padding:0px;
}
</style>
<script type="text/javascript">
//eval("alert('abc')");
// var s = "["ab","abc"]";
// var array = eval(s);
// alert(array[0]);
var xmlhttp = createXHR();
function createXHR() {
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
window.onload = function () {
document.getElementById("txtSearch").onkeyup = function () {
//判断有没有动态生成的div，如果有 则删除
var div = document.getElementById("divwd");
if (div) {
document.getElementById("container").removeChild(div);
}
var wd = this.value;
if (wd.length == 0) {
return;
}
//2 初始化
xmlhttp.open("get", "03-baidu.ashx?wd=" + wd, true);
//3
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
//["a","ab"]
var s = xmlhttp.responseText;
//把数组样子的字符串转化成数组对象
var array = eval(s); //exec("")
//动态创建div
div = document.createElement("div");
div.id = "divwd";
document.getElementById("container").appendChild(div);
//动态创建ul
var ul = document.createElement("ul");
div.appendChild(ul);
//循环生成li
for (var i = 0; i < array.length; i++) {
var li = document.createElement("li");
li.innerHTML = array[i];
ul.appendChild(li);
li.onmouseover = function () {
this.style.backgroundColor = "red";
}
li.onmouseout = function () {
this.style.backgroundColor = "";
}
}
}
}
}
//4
xmlhttp.send();
};
}
</script>
</head>
<body>
<div id="container">
<input type="text" id="txtSearch" /><input type="button" value="search" id="btnSearch" />
</div>
</body>
</html>
-----------------------------------------------------------------
请求页
<%@ WebHandler Language="C#" class="_03_baidu" %>
using System;
using System.Web;
using System.Collections.Generic;
public class _03_baidu : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
string wd = context.Request.QueryString["wd"];
string s = GetWd(wd);
context.Response.Write(s);
}
private string GetWd(string wd)
{
//所有数据
List<string> list = new List<string>() { ""abc"", ""abb"", ""阿宝"", ""abcc式的词语"", ""阿碧"", ""abac式的"", ""acfun"", ""angelababy"", ""akb48"", ""a67"", ""apple"", ""a67手机电影mp4下载"", ""app"", ""adobe reader"", ""all star"", ""adobe flash player"" };
wd = wd.Replace(""", "");
//查找以wd开头的字符串
List<string> newList = new List<string>();
foreach (string item in list)
{
string ss = item.Replace(""", "");
if (ss.Length > wd.Length)
{
string s = ss.Substring(0, wd.Length);
if (s.ToLower() == wd.ToLower())
{
newList.Add(item);
}
}
}
//拼成 ["a","b","c"]的样子
string result = "[";
foreach (string item in newList)
{
result = result + item + ",";
}
//去掉最后一个,
result = result.TrimEnd(',');
result += "]";
return result;
}
public bool IsReusable {
get {
return false;
}
}
}