正好做这个,就网上查了资料做了下,需要引用autocomplete.js,style.css,jquery.js三个文件,查询数据是写在xml里边的,这是搜索页面,还有一个页面是去查询的
Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Search.aspx.cs" Inherits="Ajax_Search" %>
<!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 runat="server">
<title>google</title>
<link href="../Css/style.css" rel="stylesheet" type="text/css" />
<script src="../Js/jquery-1.2.6.js" type="text/javascript"></script>
<script type='text/javascript' src='../Js/autocomplete.js'></script>
<script type="text/javascript">
function findValue(li)
{
if( li == null ) return alert("No match!");
if( !!li.extra ) var sValue = li.extra[0];
}
function selectItem(li) {
findValue(li);
}
function lookupLocal(){
var oSuggest = $(".ajaxinput")[0].autocompleter;
oSuggest.findValue();
return false;
}
$(document).ready(function() {
$("#ac_me").autocomplete("../Ajax/ReadXml.aspx",{
delay:10,
minChars:1,
matchSubset:1,
cacheLength:1,
onItemSelect:selectItem,
onFindValue:findValue,
autoFill:true,
maxItemsToShow:10
}
);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="ac_me" type="text" />
</div>
</form>
</body>
</html>
查询页面,绑定
Code
using System;
using System.Text;
using System.Xml;
public partial class Ajax_ReadXml : System.Web.UI.Page
{
private string Name = string.Empty;
protected void Page_Load(object sender, EventArgs e)
{
Name = CheckName(Request["q"]);
XmlDocument xmlDoc = new XmlDocument();
xmlDoc.Load(AppDomain.CurrentDomain.BaseDirectory + "XMLFile.xml");
XmlNodeList xmlNodeList = xmlDoc.SelectSingleNode("Items").ChildNodes;
StringBuilder sb = new StringBuilder();
foreach (XmlNode xn in xmlNodeList)
{
if (xn.InnerText.Contains(Name))
{
sb.Append(xn.InnerText + "\n");
}
}
Response.Write(sb.ToString());
}
private string CheckName(string str)
{
if (string.IsNullOrEmpty(str))
return string.Empty;
return str;
}
}
这是xml文件
Code
<Items>
<Name>sdfsd</Name>
<Name>fghfg</Name>
<Name>er34353</Name>
<Name>fgh564</Name>
<Name>15421245</Name>
<Name>你好莱坞</Name>
<Name>三鹿</Name>
<Name>伊利</Name>
<Name>奶牛</Name>
<Name>神七</Name>
<Name>哈的</Name>
<Name>的色</Name>
<Name>新来的</Name>
<Name>我靠</Name>
<Name>我是**</Name>
</Items>
$("#ac_me").autocomplete()里边第一个参数就是url地址了,另外传参数的话就是autocomplete.js这边的这个函数了,默认的q,在网上看到别人谈到中文字符的问题,也改了下编码格式
function makeUrl(q) {
var url = options.url + "?q=" + escape(q);
for (var i in options.extraParams) {
url += "&" + i + "=" + escape(options.extraParams[i]);
}
return url;
};
