文本框输入时 实现自动提示（像百度、google一样）
2015-11-12 11:31
591 查看
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.autocomplete.js"></script>
<link rel="Stylesheet" href="../js/jquery.autocomplete.css" />
<link rel="stylesheet" href="../js/autocomplete.css" type="text/css">
<script type="text/javascript" src="../js/neverModules-autoComplete.js"></script>
引用上面的文件
<script language="javascript">
var keyValues = [];
var goodsAutoComplete = null;
var goodsCompleteDataSource = [
{ 'text': '', 'content': '', 'hints': ''
}];
var autoComplete = null;
onload = function pageLoadHdle() {
var configuration = {
instanceName: "autoComplete",
textbox: document.getElementById("demo"),
dataSource: goodsCompleteDataSource
};
autoComplete = new neverModules.modules.autocomplete(configuration);
autoComplete.callback = function (autocompleteValue, autocompleteContent) {
document.getElementById("tx").value =
"Your text is:[" + autocompleteValue + "]; the content is:[" + autocompleteContent + "]";
}
autoComplete.useContent = true;
autoComplete.useSpaceMatch = true;
autoComplete.ignoreWhere = true;
autoComplete.create();
//autoComplete.expandAllItem();
autoComplete.showAnimateImage("../images/animated_loading.gif");
window.setTimeout(
function closeAnimateImageAfter1seconds() {
autoComplete.closeAnimateImage();
}, 1000);
onLoadGoods();
}
function onLoadGoods() { //加载人员列表
$.ajax({
type: "POST",
dataType: "text",
data: { id:"a" },
cache: false,
async: false,
url: "/dll/admin9h/showuser.ashx",
success: function (datas) {
var data = jQuery.parseJSON(datas);
for (var property in data) {
var bean = data[property];
//此处将该数组填充值 keyValues[bean.text] = bean.content;
goodsCompleteDataSource[property] = bean;
}
}, error: function (xhr) {
alert("出现错误，请稍后再试:" + xhr.responseText);
}
});
}
-----------------上面的是前台js----------
<input id="demo"
onkeyup="autoComplete.hdleEvent(event)"
ondblclick="autoComplete.expandAllItem();"
style="width:300px;font:10pt Arial;"/>
| <a href="javascript:autoComplete.showAnimateImage();">showAnimateImage</a>
| <a href="javascript:autoComplete.closeAnimateImage();">closeAnimateImage</a> |
<br/>
callback demo
<textarea id="tx" style="width:100%; font:10pt Arial"></textarea>
-------------------上面的是html文件
推荐另一个
http://yuaoi.iteye.com/blog/1024484 http://blog.csdn.net/hongsejiaozhu/article/details/2584400
在一个
只要有三个文件：
一个js插件autocomplete.js和autocomplete.css两个文件，这是jquery官方网站提供的插件；
他们的下载地址：http://jqueryui.com/demos/autocomplete/
一个是一般处理程序 ；
一个是apsx页面，看下面的代码吧;
前台：
复制代码代码如下:
<script type="text/javascript">
$(document).ready(function() {
ShowUserList($("#TextBox1"), "LoginTest.ashx");
//TextBox1为文本框的ID，loginTest.ashx为请求的一般处理程序。
function ShowUserList(obj, url) {
$.getJSON(
url,
function(msg) {
var names = new Array();
msg = msg.Table;
var names = new Array();
for (var i = 0; i < msg.length; i++) {
names.push(msg[i].loginName);
}
obj.focus().autocomplete(names);
}
);
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
用户名：<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="登录" />
</div>
</form>
</body>
后台是一般处理程序：
复制代码代码如下:
public class LoginTest : IHttpHandler
{
string str;
public void ProcessRequest(HttpContext context)
{
getUserName();
context.Response.Write(str);
}
public bool IsReusable
{
get
{
return false;
}
}
private void getUserName()
{
DataSet ds = SqlHelper.BuildDataSet("select * from login", CommandType.Text);
str = ConvertJson.ToJson(ds);
}
}
<script type="text/javascript" src="../js/jquery.autocomplete.js"></script>
<link rel="Stylesheet" href="../js/jquery.autocomplete.css" />
<link rel="stylesheet" href="../js/autocomplete.css" type="text/css">
<script type="text/javascript" src="../js/neverModules-autoComplete.js"></script>
引用上面的文件
<script language="javascript">
var keyValues = [];
var goodsAutoComplete = null;
var goodsCompleteDataSource = [
{ 'text': '', 'content': '', 'hints': ''
}];
var autoComplete = null;
onload = function pageLoadHdle() {
var configuration = {
instanceName: "autoComplete",
textbox: document.getElementById("demo"),
dataSource: goodsCompleteDataSource
};
autoComplete = new neverModules.modules.autocomplete(configuration);
autoComplete.callback = function (autocompleteValue, autocompleteContent) {
document.getElementById("tx").value =
"Your text is:[" + autocompleteValue + "]; the content is:[" + autocompleteContent + "]";
}
autoComplete.useContent = true;
autoComplete.useSpaceMatch = true;
autoComplete.ignoreWhere = true;
autoComplete.create();
//autoComplete.expandAllItem();
autoComplete.showAnimateImage("../images/animated_loading.gif");
window.setTimeout(
function closeAnimateImageAfter1seconds() {
autoComplete.closeAnimateImage();
}, 1000);
onLoadGoods();
}
function onLoadGoods() { //加载人员列表
$.ajax({
type: "POST",
dataType: "text",
data: { id:"a" },
cache: false,
async: false,
url: "/dll/admin9h/showuser.ashx",
success: function (datas) {
var data = jQuery.parseJSON(datas);
for (var property in data) {
var bean = data[property];
//此处将该数组填充值 keyValues[bean.text] = bean.content;
goodsCompleteDataSource[property] = bean;
}
}, error: function (xhr) {
alert("出现错误，请稍后再试:" + xhr.responseText);
}
});
}
-----------------上面的是前台js----------
<input id="demo"
onkeyup="autoComplete.hdleEvent(event)"
ondblclick="autoComplete.expandAllItem();"
style="width:300px;font:10pt Arial;"/>
| <a href="javascript:autoComplete.showAnimateImage();">showAnimateImage</a>
| <a href="javascript:autoComplete.closeAnimateImage();">closeAnimateImage</a> |
<br/>
callback demo
<textarea id="tx" style="width:100%; font:10pt Arial"></textarea>
-------------------上面的是html文件
推荐另一个
http://yuaoi.iteye.com/blog/1024484 http://blog.csdn.net/hongsejiaozhu/article/details/2584400
在一个
只要有三个文件：
一个js插件autocomplete.js和autocomplete.css两个文件，这是jquery官方网站提供的插件；
他们的下载地址：http://jqueryui.com/demos/autocomplete/
一个是一般处理程序 ；
一个是apsx页面，看下面的代码吧;
前台：
复制代码代码如下:
<script type="text/javascript">
$(document).ready(function() {
ShowUserList($("#TextBox1"), "LoginTest.ashx");
//TextBox1为文本框的ID，loginTest.ashx为请求的一般处理程序。
function ShowUserList(obj, url) {
$.getJSON(
url,
function(msg) {
var names = new Array();
msg = msg.Table;
var names = new Array();
for (var i = 0; i < msg.length; i++) {
names.push(msg[i].loginName);
}
obj.focus().autocomplete(names);
}
);
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
用户名：<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="登录" />
</div>
</form>
</body>
后台是一般处理程序：
复制代码代码如下:
public class LoginTest : IHttpHandler
{
string str;
public void ProcessRequest(HttpContext context)
{
getUserName();
context.Response.Write(str);
}
public bool IsReusable
{
get
{
return false;
}
}
private void getUserName()
{
DataSet ds = SqlHelper.BuildDataSet("select * from login", CommandType.Text);
str = ConvertJson.ToJson(ds);
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 仿google智能下拉ajax非插件
- 记得，把godaddy.com 都转到 www.dnspod.cn上去
- mongo中查询Array类型的字段中元素个数
- Google分布式系统三大论文（三）MapReduce: Simplified Data Processing on Large Clusters
- Google分布式系统三大论文（二）Bigtable: A Distributed Storage System for Structured Data
- Google 分布式系统三大论文（一）The Google File System
- express+mongoose+jade页面增删改查
- 类目category 扩展extension 协议protocol
- 提升APNS消息推送质量的一些想法和验证程序
- golang新手应注意的几个常见错误
- Google Guava 库用法整理
- go：结构体的可访问性
- Django和WSGI
- Django路由算法
- 更改hosts后还是无法使用Google,Facebook,Twitter等服务怎么办？
- 《An Industrial-Strength Audio Search Algorithm》译文
- 《An Industrial-Strength Audio Search Algorithm》译文
- Go语言并发之美
- STL::算法::常见算法
- mongo分片