自动完成文本框使用jquery

<asp:TextBox runat="server" ID="txtPInf" Width="60" placeholder="PartnerId" autocomplete="off"/>

我知道我可以使用<ajax:AutoCompleteExtender>，但你可以推荐我一个jQuery替代？自动完成文本框使用jquery

来源

2015-07-22 Florin M.

https://jqueryui.com/autocomplete/检查这个 –

建议一点谷歌搜索。此外，请参阅[Jquery自动完成示例]（http://dotnetmentors.com/aspnet/jquery-autocomplete-by-example.aspx） – BNN

对于jQuery自动完成，您需要添加以下CSS和js文件。

jQuery的ui.css
jQuery的x.xx.x.js
jQuery的ui.js

您可以从jQuery的网站这些文件 - https://jquery.com/download/

<div class="ui-widget"> 
    <label for="lblName">Name: </label> 
    <input id="Names"> 
</div> 

<script> 
    $(function() { 
    var arrNames = [ 
     "A", 
     "Abc", 
     "Abcd", 
     "Bcd", 
     "d" 
    ]; 
    $("#Names").autocomplete({ 
     source: arrNames 
    }); 
    }); 
    </script>

来源

2015-07-22 07:07:49

不能正常工作.... –

我在'http://jsfiddle.net'上实现了上述解决方案。请问您可以点击下面的链接并重试。 http://jsfiddle.net/pUeue/2637/ –

最简单的一种是jQuery UI's AutoComplete

来源

2015-07-22 06:52:29

一个具体的例子（如上 - 它不工作）将是很好 –

我不准备发送端到端示例。没有什么特别的东西需要处理才能让它工作。 gkrishy的评论我知道接近一个很好的例子。 –

要使用它在asp.net web项目，你可以看看at this的解决方案，这主要适用于jQuery和Web方法的校长。

您可以使用jQuery的内置自动完成功能，从这里https://jqueryui.com/autocomplete/

来源

2015-07-22 07:02:47

看看导向添加脚本Refernce并呼吁JQuery的自动完成插件在.aspx页面中

我创建了一个新的网站并在default.aspx页面中添加下面的代码。

注：我已经这样做了按照您的要求 “文本框”

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>JQuery AutoComplete TextBox Demo</title> 
<link rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" /> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div><h1>AutoComplete Textbox</h1> 
City: 
<asp:TextBox ID="txtCity" runat="server"></asp:TextBox> 
</div> 
</form> 
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"</script> 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script> 
<script type="text/javascript"> 
$(function() { 
$("#txtCity").autocomplete({ 
source: function (request, response) { 
var param = { cityName: $('#txtCity').val() }; 
$.ajax({ 
url: "Default.aspx/GetCities", 
data: JSON.stringify(param), 
dataType: "json", 
type: "POST", 
contentType: "application/json; charset=utf-8", 
dataFilter: function (data) { return data; }, 
success: function (data) { 
response($.map(data.d, function (item) { 
return { 
value: item 
} 
})) 
}, 
error: function (XMLHttpRequest, textStatus, errorThrown) { 
alert(textStatus); 
} 
}); 
}, 
minLength: 2//minLength as 2, it means when ever user enter 2 character in TextBox the AutoComplete method will fire and get its source data. 
}); 
}); 
</script> 
</body> 
</html>

的WebMethod从Northwind数据库

我已经默认添加一个WebMethod “GetCities” 取市。 aspx.cs在JQuery的源代码中调用它自动完成

[WebMethod] 
public static List<string> GetCities(string cityName) 
{ 
    List<string> City = new List<string>(); 
    string query = string.Format("SELECT DISTINCT City FROM Customers WHERE City LIKE '%{0}%'", cityName); 
    //Note: you can configure Connection string in web.config also. 
    using (SqlConnection con = new SqlConnection(@"Data Source = .\SQLEXPRESS2008R2; initial Catalog = NORTHWND; Integrated Security = true")) 
    { 
     using (SqlCommand cmd = new SqlCommand(query, con)) 
     { 
      con.Open(); 
      SqlDataReader reader = cmd.ExecuteReader(); 
      while (reader.Read()) 
      { 
       City.Add(reader.GetString(0)); 
      } 
     } 
    } 
    return City; 
}

源：Dotnetcodepress

来源

2015-07-22 07:04:39 gkrishy

自动完成文本框使用jquery

回答

相关问题