自动完成文字框 [英] Autocomplete textbox
本文介绍了自动完成文字框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想把这种类型
类别COMPANYNAME
---------- -------------
分类1 compny1
分类2 compny2
分类3 compny3
我完成了部分代码
现在我的问题是，当使用键事件选择类别"或公司名称"时，在文本框中键入文本可以正常工作，但是当自动完成功能不恢复时删除文本框中的文本时，我的问题是
表示该页面未回发，这是我的问题
我在webservice中编写了代码
Hi,
I want out put this type
Categories COMPANYNAME
---------- -------------
Categories1 compny1
Categories2 compny2
Categories3 compny3
I done some part of code
now my problem is when type the text in textbox its working when select the Categories or COMPANYNAME using key events its fine but my problem when remove the text in textbox that time the autocomplete is not coming back
means the page is not postbacking this is my proble
i wrote the code in webservice
[System.Web.Services.WebMethod]
public string CheckDateTime(string args)
{
string constructTable="";
int t = args.Length;
if (args == "")
{
int x = 0;
args = x.ToString();
}
//if (t >= 3)
//{
int m = 20;
SqlConnection objConnection = new SqlConnection(@"Data Source=STANZOO-FE82BEA\SQLEXPRESS;Initial Catalog=stanzoo;Integrated Security=True");
SqlDataAdapter objdata = new SqlDataAdapter("select distinct categoryid,category from items where category like '" + args + "%'", objConnection);
SqlDataAdapter objdata1 = new SqlDataAdapter("select Top 10 subcategoryid,subcategory from items where subcategory like '" + args + "%'", objConnection);
DataSet objdataset = new DataSet();
DataSet objdataset1 = new DataSet();
objdata.Fill(objdataset, "Categories");
objdata1.Fill(objdataset1, "SubCategories");
constructTable = "<table border='1' cellpadding='5' cellspacing='5' height='150px'>";
constructTable += "<tr><td style='vertical-align:top' class='sdf'>";
constructTable += "<div id='s' style='background-color:red;width:150px;align:center'>Categories</div><div id='san' style='background-color:white;width:150px;align:center'>";
//constructTable += "<div id='s' style='background-color:red;width:150px;align:center'>Categories</div><div id='ram' style='background-color:yellow; >";
for (int i = 0; i < objdataset.Tables[0].Rows.Count; i++)
{
string s = objdataset.Tables[0].Rows[i]["category"].ToString();
string strText = args.ToLower();
s = s.ToLower();
string x = s.Replace(strText, @"<span style= color:red >" + strText + "</span>");
string after1 = x.Substring(0, 24).ToUpper() + x.Substring(24);
//HiddenField1.Value = objdataset.Tables[0].Rows.Count.ToString();
constructTable += "<a style='cursor:pointer'; onclick='javascript:ShowCategory(" + objdataset.Tables[0].Rows[i]["categoryid"].ToString() + ")'><div id='" + i + "' class='cat' onMouseOver=style.backgroundColor='#2172A1'; onMouseOut=style.backgroundColor='#666699';>" + after1 + "</div></a>";
}
constructTable += "</div>";
constructTable += "</td><td style='vertical-align:top'>";
constructTable += "<div style='background-color:red;width:150px;align:center'>CompanyName</div>";
for (int i = 0; i < objdataset1.Tables[0].Rows.Count; i++)
{
string s1 = objdataset1.Tables[0].Rows[i]["subcategory"].ToString();
string strText = args.ToLower();
s1 = s1.ToLower();
string x1 = s1.Replace(strText, "<span style=color:red;>" + strText + "</span>");
string after2 = x1.Substring(0, 24).ToUpper() + x1.Substring(24);
//HiddenField2.Value = objdataset1.Tables[0].Rows.Count.ToString();
constructTable += "<div id=" + m + " onMouseOver=style.backgroundColor='#2172A1'; onMouseOut=style.backgroundColor='#666699'; style='cursor:Pointer' onclick='javascript:ShowSubcategory(" + objdataset1.Tables[0].Rows[i]["subcategoryid"].ToString() + ")'>" + after2 + "</div>";
m++;
}
constructTable += "</td></tr></table>";
// divTable.InnerHtml = constructTable; ;
//}
return constructTable;
//string s;
//s="hi";
//return s;
//return args +" Current Datetime is "+ DateTime.Now.ToString("dd/MMM/yyyy HH:mm:ss");
//}
}
我的js文件是
my js file is
// JScript File
var z = null;
var text2 = null;
function ShowText() {
// var TextBox = document.getElementById(GetClientId("ctl00_txtTest"));
var TextBox = document.getElementById("ctl00_TextBox1");
alert(TextBox.value);
}
$(document).ready(function(e) {
$('#ctl00_TextBox1').keyup(function(e) {
//alert("hi");
var msgbox = $("#status");
var tx_val = document.getElementById("ctl00_TextBox1").value;
if (e.keyCode != 40 && e.keyCode != 39 && e.keyCode != 38 && e.keyCode != 37) {
$.ajax({
type: "POST",
url: "WebService.asmx/CheckDateTime",
data: "{'args':'" + tx_val + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
msgbox.html(msg.d);
}
});
}
});
});
function ShowCategory(category) {
// alert(category);
var id = category - 1;
var str_f = document.getElementById(id).innerHTML;
str_f = str_f.toLowerCase();
str_f2 = str_f.replace(/<span style/g, "");
var str_f3 = str_f2.replace('=', "");
var str_f4 = str_f3.replace('"', "");
str_f4 = str_f4.replace('color', "");
str_f4 = str_f4.replace(':', "");
str_f4 = str_f4.replace('red', "");
str_f4 = str_f4.replace(';', "");
str_f4 = str_f4.replace('"', "");
str_f4 = str_f4.replace('>', "");
str_f4 = str_f4.replace('</span>', "");
str_f4 = str_f4.replace(" ", "");
str_f4 = str_f4.replace(/^\s*|\s*$/g, '');
document.getElementById("ctl00_TextBox1").value = str_f4;
var div = document.getElementById("status");
div.style.display = 'none';
// $('#ctl00_hdnids').val(category);
// $('#ctl00_btnIds').click();
}
function ShowSubcategory(SubCategory) {
$('#ctl00_hdnids').val(SubCategory);
$('#ctl00_btnSubcategory').click();
}
function test(e) {
if (z == null) {
var i = 0;
} //text1
else { //etext1
var i = z + 1;
} //etext1
var j = 0;
//deugger;
if (e.keyCode == 40) {//ecode40
if (text2 == null) {
while (document.getElementById("" + j + "")) {//whileec40
if (i == j) {
document.getElementById("" + j + "").style.background = "#66FF66";
z = i;
document.getElementById("" + j + "").focus();
var str_f = document.getElementById("" + j + "").innerHTML;
str_f = str_f.toLowerCase();
str_f2 = str_f.replace(/<span style/g, "");
var str_f3 = str_f2.replace('=', "");
var str_f4 = str_f3.replace('"', "");
str_f4 = str_f4.replace('color', "");
str_f4 = str_f4.replace(':', "");
str_f4 = str_f4.replace('red', "");
str_f4 = str_f4.replace(';', "");
str_f4 = str_f4.replace('"', "");
str_f4 = str_f4.replace('>', "");
str_f4 = str_f4.replace('</span>', "");
str_f4 = str_f4.replace(" ", "");
document.getElementById('ctl00_TextBox1').value = str_f4;
}
else {
document.getElementById("" + j + "").style.background = "#666699";
}
j++;
} //whileec40
} //text2
} //ecode40
else
if (e.keyCode == 38) {//ecode38
if (text2 == null) {
i = z - 1;
while (document.getElementById("" + j + "")) {//38while
if (i == j) {
document.getElementById("" + j + "").style.background = "#66FF66";
z = i;
document.getElementById("" + j + "").focus();
var str_f = document.getElementById("" + j + "").innerHTML;
str_f = str_f.toLowerCase();
//alert(str_f);
str_f2 = str_f.replace("<span style", "");
//str_f2 = str_f.replace('<span style', "");
var str_f3 = str_f2.replace('=', "");
var str_f4 = str_f3.replace('"', "");
str_f4 = str_f4.replace('color', "");
str_f4 = str_f4.replace(':', "");
str_f4 = str_f4.replace('red', "");
str_f4 = str_f4.replace(';', "");
str_f4 = str_f4.replace('"', "");
str_f4 = str_f4.replace('>', "");
str_f4 = str_f4.replace('</span>', "");
// str_f4 = str_f4.replace("red", "");
//alert(str_f);
document.getElementById('ctl00_TextBox1').value = str_f4;
}
else {
document.getElementById("" + j + "").style.background = "#666699";
}
j++;
} //38while
} //38text2
} //ecode38
if (e.keyCode == 39) {//ecode39
document.getElementById('san').style.background = "#666699";
document.getElementById("ctl00_TextBox1").value = "";
if (text2 == null) {
i = z - 1;
while (document.getElementById("" + j + "")) {//38while
if (i == j) {
document.getElementById("" + j + "").style.background = "#FFFFFF";
}
else {
document.getElementById("" + j + "").style.background = "#FFFFFF";
}
j++;
}
var sub = 20;
//var su1 = 20;
document.getElementById("" + sub + "").style.background = "#66FF66";
text2 = sub;
document.getElementById("" + sub + "").focus();
var str_f6 = document.getElementById("" + sub + "").innerHTML;
str_f6 = str_f6.toLowerCase();
//alert(str_f);
str_f7 = str_f6.replace("<span style", "");
//str_f2 = str_f.replace('<span style', "");
var str_f8 = str_f7.replace('=', "");
var str_f9 = str_f8.replace('"', "");
str_f9 = str_f9.replace('color', "");
str_f9 = str_f9.replace(':', "");
str_f9 = str_f9.replace('red', "");
str_f9 = str_f9.replace(';', "");
str_f9 = str_f9.replace('"', "");
str_f9 = str_f9.replace('>', "");
str_f9 = str_f9.replace('</span>', "");
document.getElementById("ctl00_TextBox1").value = str_f9;
// while (document.getElementById("" + su + "")) {//38while
// if (su==su1) {
// document.getElementById("" + su + "").style.background = "#66FF66";
// text2 = su;
// document.getElementById("" + su + "").focus();
// document.getElementById('ctl00_TextBox1').value = document.getElementById("" + su + "").innerHTML;
// }
// else {
// document.getElementById("" + su + "").style.background = "#FFFFFF";
// }
// su1++;
// }
} //39text2
} //ecode39
else
if (e.keyCode == 40) {//secode40
var sub1 = 20;
if (text2 != null) {
sub1 = text2 + 1;
var sub2 = 20;
while (document.getElementById("" + sub2 + "")) {//s40while
if (sub1 == sub2) {
document.getElementById("" + sub2 + "").style.background = "#66FF66";
//document.getElementById('Text2').value = sub1;
text2 = sub1;
document.getElementById("" + sub2 + "").focus();
var str_f11 = document.getElementById("" + sub2 + "").innerHTML;
str_f11 = str_f11.toLowerCase();
//alert(str_f11);
var str_f12 = str_f11.replace("<span style", "");
//str_f2 = str_f.replace('<span style', "");
var str_f13 = str_f12.replace('=', "");
var str_f14 = str_f13.replace('"', "");
str_f14 = str_f14.replace('color', "");
str_f14 = str_f14.replace(':', "");
str_f14 = str_f14.replace('red', "");
str_f14 = str_f14.replace(';', "");
str_f14 = str_f14.replace('"', "");
str_f14 = str_f14.replace('>', "");
str_f14 = str_f14.replace('</span>', "");
document.getElementById("ctl00_TextBox1").value = str_f14;
// document.getElementById('ctl00_TextBox1').value = document.getElementById("" + sub2 + "").innerHTML;
}
else {
document.getElementById("" + sub2 + "").style.background = "#666699";
}
sub2++;
} //s40while
} //s40text2
} //secode40
else
if (e.keyCode == 38) {//secode38
// if (document.getElementById('Text2').value != "") { //text2
if (text2 != null) {
sub1 = text2 - 1;
//sub1 = parseInt(document.getElementById('Text2').value) - 1;
sub2 = 20;
while (document.getElementById("" + sub2 + "")) {
if (sub1 == sub2) {
document.getElementById("" + sub2 + "").style.background = "#66FF66";
//document.getElementById('Text2').value = sub1;
text2 = sub1;
document.getElementById("" + sub2 + "").focus();
var str_f11 = document.getElementById("" + sub2 + "").innerHTML;
str_f11 = str_f11.toLowerCase();
//alert(str_f);
var str_f12 = str_f11.replace("<span style", "");
//str_f2 = str_f.replace('<span style', "");
var str_f13 = str_f12.replace('=', "");
var str_f14 = str_f13.replace('"', "");
str_f14 = str_f14.replace('color', "");
str_f14 = str_f14.replace(':', "");
str_f14 = str_f14.replace('red', "");
str_f14 = str_f14.replace(';', "");
str_f14 = str_f14.replace('"', "");
str_f14 = str_f14.replace('>', "");
str_f14 = str_f14.replace('</span>', "");
document.getElementById("ctl00_TextBox1").value = str_f14;
//document.getElementById('ctl00_TextBox1').value = document.getElementById("" + sub2 + "").innerHTML;
}
else {
document.getElementById("" + sub2 + "").style.background = "#666699";
}
sub2++;
} //while
} //text2
} //secode38
else
if (e.keyCode == 37) {//ecode37
// debugger;
// document.getElementById("s1").style.background = "#99CCFF";
//debugger;
document.getElementById("ctl00_TextBox1").value = "";
//var f = document.getElementById('Text2').value;
var f = text2;
text2 = null;
sub2 = 20;
// alert(sub1);
while (document.getElementById("" + sub2 + "")) {//whileecode37
if (sub1 == sub2) {
alert("q");
}
else {
document.getElementById("" + sub2 + "").style.background = "#FFFFFF";
//document.getElementById('Text1').value = -1;
z = -1;
}
sub2++
} //whileecode37
} //ecode37
if (e.keyCode == 8) {
text2 = null;
z = null;
}
} //function
var theForm = document.forms['aspnetForm'];
if (!theForm) {
theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
//theForm.__EVENTTARGET.value = eventTarget;
//theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//Javascripts/Jscript.js/
//"AjaxWebServices/NewDealer.asmx/UpsertDealer"</pre>
//Javascripts/Jscript.js/
//"AjaxWebServices/NewDealer.asmx/UpsertDealer",</pre>
推荐答案
(document).ready(function(e){
(document).ready(function(e) {
('#ctl00_TextBox1').keyup(function(e){ //alert(& quot; hi& quot;); var msgbox =
('#ctl00_TextBox1').keyup(function(e) { //alert("hi"); var msgbox =
(&#status& quot)); var tx_val = document.getElementById(& quot; ctl00_TextBox1& quot;).value; if(e.keyCode！= 40& amp; e.keyCode！= 39& amp; amp; e.keyCode！= 38& amp; amp; e.keyCode！= 37 ){
("#status"); var tx_val = document.getElementById("ctl00_TextBox1").value; if (e.keyCode != 40 && e.keyCode != 39 && e.keyCode != 38 && e.keyCode != 37) {
这篇关于自动完成文字框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
