Autocomplete textbox

Question

1.00/5 (1 vote)

See more:

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=&quot;&quot;;
        int t = args.Length;
        if (args == &quot;&quot;)
        {
            int x = 0;
            args = x.ToString();
        }
       //if (t &gt;= 3)
       //{
            int m = 20;
            SqlConnection objConnection = new SqlConnection(@&quot;Data Source=STANZOO-FE82BEA\SQLEXPRESS;Initial Catalog=stanzoo;Integrated Security=True&quot;);
            SqlDataAdapter objdata = new SqlDataAdapter(&quot;select distinct categoryid,category from items where category like &#39;&quot; + args + &quot;%&#39;&quot;, objConnection);
            SqlDataAdapter objdata1 = new SqlDataAdapter(&quot;select Top 10 subcategoryid,subcategory from items where subcategory like &#39;&quot; + args + &quot;%&#39;&quot;, objConnection);
            DataSet objdataset = new DataSet();
            DataSet objdataset1 = new DataSet();
            objdata.Fill(objdataset, &quot;Categories&quot;);
            objdata1.Fill(objdataset1, &quot;SubCategories&quot;);
            constructTable = &quot;&lt;table border=&#39;1&#39; cellpadding=&#39;5&#39; cellspacing=&#39;5&#39; height=&#39;150px&#39;&gt;&quot;;
            constructTable += &quot;&lt;tr&gt;&lt;td  style=&#39;vertical-align:top&#39; class=&#39;sdf&#39;&gt;&quot;;
            constructTable += &quot;&lt;div id=&#39;s&#39; style=&#39;background-color:red;width:150px;align:center&#39;&gt;Categories&lt;/div&gt;&lt;div id=&#39;san&#39; style=&#39;background-color:white;width:150px;align:center&#39;&gt;&quot;;
            //constructTable += &quot;&lt;div id=&#39;s&#39; style=&#39;background-color:red;width:150px;align:center&#39;&gt;Categories&lt;/div&gt;&lt;div id=&#39;ram&#39; style=&#39;background-color:yellow; &gt;&quot;;
            for (int i = 0; i &lt; objdataset.Tables[0].Rows.Count; i++)
            {
                string s = objdataset.Tables[0].Rows[i][&quot;category&quot;].ToString();
                string strText = args.ToLower();
                s = s.ToLower();
                string x = s.Replace(strText, @&quot;&lt;span style= color:red &gt;&quot; + strText + &quot;&lt;/span&gt;&quot;);
                string after1 = x.Substring(0, 24).ToUpper() + x.Substring(24);
                //HiddenField1.Value = objdataset.Tables[0].Rows.Count.ToString();
                constructTable += &quot;&lt;a style=&#39;cursor:pointer&#39;;  onclick=&#39;javascript:ShowCategory(&quot; + objdataset.Tables[0].Rows[i][&quot;categoryid&quot;].ToString() + &quot;)&#39;&gt;&lt;div id=&#39;&quot; + i + &quot;&#39; class=&#39;cat&#39; onMouseOver=style.backgroundColor=&#39;#2172A1&#39;; onMouseOut=style.backgroundColor=&#39;#666699&#39;;&gt;&quot; + after1 + &quot;&lt;/div&gt;&lt;/a&gt;&quot;;
            }
            constructTable += &quot;&lt;/div&gt;&quot;;
            constructTable += &quot;&lt;/td&gt;&lt;td style=&#39;vertical-align:top&#39;&gt;&quot;;
            constructTable += &quot;&lt;div style=&#39;background-color:red;width:150px;align:center&#39;&gt;CompanyName&lt;/div&gt;&quot;;
            for (int i = 0; i &lt; objdataset1.Tables[0].Rows.Count; i++)
            {
                string s1 = objdataset1.Tables[0].Rows[i][&quot;subcategory&quot;].ToString();
                string strText = args.ToLower();
                s1 = s1.ToLower();
                string x1 = s1.Replace(strText, &quot;&lt;span style=color:red;&gt;&quot; + strText + &quot;&lt;/span&gt;&quot;);
                string after2 = x1.Substring(0, 24).ToUpper() + x1.Substring(24);
                //HiddenField2.Value = objdataset1.Tables[0].Rows.Count.ToString();
                constructTable += &quot;&lt;div id=&quot; + m + &quot; onMouseOver=style.backgroundColor=&#39;#2172A1&#39;; onMouseOut=style.backgroundColor=&#39;#666699&#39;; style=&#39;cursor:Pointer&#39; onclick=&#39;javascript:ShowSubcategory(&quot; + objdataset1.Tables[0].Rows[i][&quot;subcategoryid&quot;].ToString() + &quot;)&#39;&gt;&quot; + after2 + &quot;&lt;/div&gt;&quot;;
                m++;
            }
            constructTable += &quot;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&quot;;

            // divTable.InnerHtml = constructTable; ;
       //}
            return constructTable;

            //string s;
            //s=&quot;hi&quot;;
            //return s;
            //return args +&quot; Current Datetime is &quot;+ DateTime.Now.ToString(&quot;dd/MMM/yyyy HH:mm:ss&quot;);
            //}
    }

my js file is

// JScript File
var z = null;
var text2 = null;

function ShowText() {
    //  var TextBox = document.getElementById(GetClientId(&quot;ctl00_txtTest&quot;));
    var TextBox = document.getElementById(&quot;ctl00_TextBox1&quot;);
    alert(TextBox.value);
}
$(document).ready(function(e) {
    $(&#39;#ctl00_TextBox1&#39;).keyup(function(e) {
        //alert(&quot;hi&quot;);
        var msgbox = $(&quot;#status&quot;);
        var tx_val = document.getElementById(&quot;ctl00_TextBox1&quot;).value;
        if (e.keyCode != 40 &amp;&amp; e.keyCode != 39 &amp;&amp; e.keyCode != 38 &amp;&amp; e.keyCode != 37) {
            $.ajax({
                type: &quot;POST&quot;,
                url: &quot;WebService.asmx/CheckDateTime&quot;,
                data: &quot;{&#39;args&#39;:&#39;&quot; + tx_val + &quot;&#39;}&quot;,
                contentType: &quot;application/json; charset=utf-8&quot;,
                dataType: &quot;json&quot;,
                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(/&lt;span style/g, &quot;&quot;);
    var str_f3 = str_f2.replace(&#39;=&#39;, &quot;&quot;);
    var str_f4 = str_f3.replace(&#39;&quot;&#39;, &quot;&quot;);
    str_f4 = str_f4.replace(&#39;color&#39;, &quot;&quot;);
    str_f4 = str_f4.replace(&#39;:&#39;, &quot;&quot;);
    str_f4 = str_f4.replace(&#39;red&#39;, &quot;&quot;);
    str_f4 = str_f4.replace(&#39;;&#39;, &quot;&quot;);
    str_f4 = str_f4.replace(&#39;&quot;&#39;, &quot;&quot;);
    str_f4 = str_f4.replace(&#39;&gt;&#39;, &quot;&quot;);
    str_f4 = str_f4.replace(&#39;&lt;/span&gt;&#39;, &quot;&quot;);
    str_f4 = str_f4.replace(&quot; &quot;, &quot;&quot;);
    str_f4 = str_f4.replace(/^\s*|\s*$/g, &#39;&#39;);
    document.getElementById(&quot;ctl00_TextBox1&quot;).value = str_f4;
    var div = document.getElementById(&quot;status&quot;);
    div.style.display = &#39;none&#39;;
//    $(&#39;#ctl00_hdnids&#39;).val(category);
//    $(&#39;#ctl00_btnIds&#39;).click();

}
function ShowSubcategory(SubCategory) {
    $(&#39;#ctl00_hdnids&#39;).val(SubCategory);
    $(&#39;#ctl00_btnSubcategory&#39;).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(&quot;&quot; + j + &quot;&quot;)) {//whileec40
                if (i == j) {
                    document.getElementById(&quot;&quot; + j + &quot;&quot;).style.background = &quot;#66FF66&quot;;
                    z = i;
                    document.getElementById(&quot;&quot; + j + &quot;&quot;).focus();
                    var str_f = document.getElementById(&quot;&quot; + j + &quot;&quot;).innerHTML;
                    str_f = str_f.toLowerCase();
                    str_f2 = str_f.replace(/&lt;span style/g, &quot;&quot;);
                    var str_f3 = str_f2.replace(&#39;=&#39;, &quot;&quot;);
                    var str_f4 = str_f3.replace(&#39;&quot;&#39;, &quot;&quot;);
                    str_f4 = str_f4.replace(&#39;color&#39;, &quot;&quot;);
                    str_f4 = str_f4.replace(&#39;:&#39;, &quot;&quot;);
                    str_f4 = str_f4.replace(&#39;red&#39;, &quot;&quot;);
                    str_f4 = str_f4.replace(&#39;;&#39;, &quot;&quot;);
                    str_f4 = str_f4.replace(&#39;&quot;&#39;, &quot;&quot;);
                    str_f4 = str_f4.replace(&#39;&gt;&#39;, &quot;&quot;);
                    str_f4 = str_f4.replace(&#39;&lt;/span&gt;&#39;, &quot;&quot;);
                    str_f4 = str_f4.replace(&quot; &quot;, &quot;&quot;);
                    document.getElementById(&#39;ctl00_TextBox1&#39;).value = str_f4;
                }
                else {
                    document.getElementById(&quot;&quot; + j + &quot;&quot;).style.background = &quot;#666699&quot;;
                }
                j++;
            } //whileec40
        } //text2
    } //ecode40
    else
        if (e.keyCode == 38) {//ecode38
        if (text2 == null) {
            i = z - 1;
            while (document.getElementById(&quot;&quot; + j + &quot;&quot;)) {//38while
                if (i == j) {
                    document.getElementById(&quot;&quot; + j + &quot;&quot;).style.background = &quot;#66FF66&quot;;
                    z = i;
                    document.getElementById(&quot;&quot; + j + &quot;&quot;).focus();
                    var str_f = document.getElementById(&quot;&quot; + j + &quot;&quot;).innerHTML;
                    str_f = str_f.toLowerCase();
                    //alert(str_f);
                    str_f2 = str_f.replace(&quot;&lt;span style&quot;, &quot;&quot;);
                    //str_f2 = str_f.replace(&#39;&lt;span style&#39;, &quot;&quot;);
                    var str_f3 = str_f2.replace(&#39;=&#39;, &quot;&quot;);
                    var str_f4 = str_f3.replace(&#39;&quot;&#39;, &quot;&quot;);
                    str_f4 = str_f4.replace(&#39;color&#39;, &quot;&quot;);
                    str_f4 = str_f4.replace(&#39;:&#39;, &quot;&quot;);
                    str_f4 = str_f4.replace(&#39;red&#39;, &quot;&quot;);
                    str_f4 = str_f4.replace(&#39;;&#39;, &quot;&quot;);
                    str_f4 = str_f4.replace(&#39;&quot;&#39;, &quot;&quot;);
                    str_f4 = str_f4.replace(&#39;&gt;&#39;, &quot;&quot;);
                    str_f4 = str_f4.replace(&#39;&lt;/span&gt;&#39;, &quot;&quot;);
                    // str_f4 = str_f4.replace(&quot;red&quot;, &quot;&quot;);
                    //alert(str_f);
                    document.getElementById(&#39;ctl00_TextBox1&#39;).value = str_f4;
                }
                else {
                    document.getElementById(&quot;&quot; + j + &quot;&quot;).style.background = &quot;#666699&quot;;
                }
                j++;
            } //38while
        } //38text2
    } //ecode38
    if (e.keyCode == 39) {//ecode39
        document.getElementById(&#39;san&#39;).style.background = &quot;#666699&quot;;
        document.getElementById(&quot;ctl00_TextBox1&quot;).value = &quot;&quot;;
        if (text2 == null) {
            i = z - 1;
            while (document.getElementById(&quot;&quot; + j + &quot;&quot;)) {//38while
                if (i == j) {
                    document.getElementById(&quot;&quot; + j + &quot;&quot;).style.background = &quot;#FFFFFF&quot;;
                }
                else {
                    document.getElementById(&quot;&quot; + j + &quot;&quot;).style.background = &quot;#FFFFFF&quot;;
                }
                j++;
            }
            var sub = 20;
            //var su1 = 20;
            document.getElementById(&quot;&quot; + sub + &quot;&quot;).style.background = &quot;#66FF66&quot;;
            text2 = sub;
            document.getElementById(&quot;&quot; + sub + &quot;&quot;).focus();
            var str_f6 = document.getElementById(&quot;&quot; + sub + &quot;&quot;).innerHTML;
            str_f6 = str_f6.toLowerCase();
            //alert(str_f);
            str_f7 = str_f6.replace(&quot;&lt;span style&quot;, &quot;&quot;);
            //str_f2 = str_f.replace(&#39;&lt;span style&#39;, &quot;&quot;);
            var str_f8 = str_f7.replace(&#39;=&#39;, &quot;&quot;);
            var str_f9 = str_f8.replace(&#39;&quot;&#39;, &quot;&quot;);
            str_f9 = str_f9.replace(&#39;color&#39;, &quot;&quot;);
            str_f9 = str_f9.replace(&#39;:&#39;, &quot;&quot;);
            str_f9 = str_f9.replace(&#39;red&#39;, &quot;&quot;);
            str_f9 = str_f9.replace(&#39;;&#39;, &quot;&quot;);
            str_f9 = str_f9.replace(&#39;&quot;&#39;, &quot;&quot;);
            str_f9 = str_f9.replace(&#39;&gt;&#39;, &quot;&quot;);
            str_f9 = str_f9.replace(&#39;&lt;/span&gt;&#39;, &quot;&quot;);
            document.getElementById(&quot;ctl00_TextBox1&quot;).value = str_f9;
            //            while (document.getElementById(&quot;&quot; + su + &quot;&quot;)) {//38while
            //                if (su==su1) {
            //                    document.getElementById(&quot;&quot; + su + &quot;&quot;).style.background = &quot;#66FF66&quot;;
            //                    text2 = su;
            //                    document.getElementById(&quot;&quot; + su + &quot;&quot;).focus();
            //                    document.getElementById(&#39;ctl00_TextBox1&#39;).value = document.getElementById(&quot;&quot; + su + &quot;&quot;).innerHTML;
            //                }
            //                else {
            //                    document.getElementById(&quot;&quot; + su + &quot;&quot;).style.background = &quot;#FFFFFF&quot;;
            //                }
            //                su1++;
            //            }
        } //39text2
    } //ecode39
    else
        if (e.keyCode == 40) {//secode40
        var sub1 = 20;
        if (text2 != null) {
            sub1 = text2 + 1;
            var sub2 = 20;
            while (document.getElementById(&quot;&quot; + sub2 + &quot;&quot;)) {//s40while
                if (sub1 == sub2) {
                    document.getElementById(&quot;&quot; + sub2 + &quot;&quot;).style.background = &quot;#66FF66&quot;;
                    //document.getElementById(&#39;Text2&#39;).value = sub1;
                    text2 = sub1;
                    document.getElementById(&quot;&quot; + sub2 + &quot;&quot;).focus();
                    var str_f11 = document.getElementById(&quot;&quot; + sub2 + &quot;&quot;).innerHTML;
                    str_f11 = str_f11.toLowerCase();
                    //alert(str_f11);
                    var str_f12 = str_f11.replace(&quot;&lt;span style&quot;, &quot;&quot;);
                    //str_f2 = str_f.replace(&#39;&lt;span style&#39;, &quot;&quot;);
                    var str_f13 = str_f12.replace(&#39;=&#39;, &quot;&quot;);
                    var str_f14 = str_f13.replace(&#39;&quot;&#39;, &quot;&quot;);
                    str_f14 = str_f14.replace(&#39;color&#39;, &quot;&quot;);
                    str_f14 = str_f14.replace(&#39;:&#39;, &quot;&quot;);
                    str_f14 = str_f14.replace(&#39;red&#39;, &quot;&quot;);
                    str_f14 = str_f14.replace(&#39;;&#39;, &quot;&quot;);
                    str_f14 = str_f14.replace(&#39;&quot;&#39;, &quot;&quot;);
                    str_f14 = str_f14.replace(&#39;&gt;&#39;, &quot;&quot;);
                    str_f14 = str_f14.replace(&#39;&lt;/span&gt;&#39;, &quot;&quot;);
                    document.getElementById(&quot;ctl00_TextBox1&quot;).value = str_f14;
                    // document.getElementById(&#39;ctl00_TextBox1&#39;).value = document.getElementById(&quot;&quot; + sub2 + &quot;&quot;).innerHTML;

                }
                else {
                    document.getElementById(&quot;&quot; + sub2 + &quot;&quot;).style.background = &quot;#666699&quot;;
                }
                sub2++;
            } //s40while
        } //s40text2
    } //secode40
    else
        if (e.keyCode == 38) {//secode38
        //  if (document.getElementById(&#39;Text2&#39;).value != &quot;&quot;) {   //text2
        if (text2 != null) {
            sub1 = text2 - 1;
            //sub1 = parseInt(document.getElementById(&#39;Text2&#39;).value) - 1;

            sub2 = 20;
            while (document.getElementById(&quot;&quot; + sub2 + &quot;&quot;)) {
                if (sub1 == sub2) {
                    document.getElementById(&quot;&quot; + sub2 + &quot;&quot;).style.background = &quot;#66FF66&quot;;
                    //document.getElementById(&#39;Text2&#39;).value = sub1;
                    text2 = sub1;
                    document.getElementById(&quot;&quot; + sub2 + &quot;&quot;).focus();
                    var str_f11 = document.getElementById(&quot;&quot; + sub2 + &quot;&quot;).innerHTML;
                    str_f11 = str_f11.toLowerCase();
                    //alert(str_f);
                    var str_f12 = str_f11.replace(&quot;&lt;span style&quot;, &quot;&quot;);
                    //str_f2 = str_f.replace(&#39;&lt;span style&#39;, &quot;&quot;);
                    var str_f13 = str_f12.replace(&#39;=&#39;, &quot;&quot;);
                    var str_f14 = str_f13.replace(&#39;&quot;&#39;, &quot;&quot;);
                    str_f14 = str_f14.replace(&#39;color&#39;, &quot;&quot;);
                    str_f14 = str_f14.replace(&#39;:&#39;, &quot;&quot;);
                    str_f14 = str_f14.replace(&#39;red&#39;, &quot;&quot;);
                    str_f14 = str_f14.replace(&#39;;&#39;, &quot;&quot;);
                    str_f14 = str_f14.replace(&#39;&quot;&#39;, &quot;&quot;);
                    str_f14 = str_f14.replace(&#39;&gt;&#39;, &quot;&quot;);
                    str_f14 = str_f14.replace(&#39;&lt;/span&gt;&#39;, &quot;&quot;);
                    document.getElementById(&quot;ctl00_TextBox1&quot;).value = str_f14;
                    //document.getElementById(&#39;ctl00_TextBox1&#39;).value = document.getElementById(&quot;&quot; + sub2 + &quot;&quot;).innerHTML;
                }
                else {
                    document.getElementById(&quot;&quot; + sub2 + &quot;&quot;).style.background = &quot;#666699&quot;;
                }
                sub2++;
            } //while
        } //text2
    } //secode38
    else
        if (e.keyCode == 37) {//ecode37
        // debugger;
        // document.getElementById(&quot;s1&quot;).style.background = &quot;#99CCFF&quot;;
        //debugger;

            document.getElementById(&quot;ctl00_TextBox1&quot;).value = &quot;&quot;;
        //var f = document.getElementById(&#39;Text2&#39;).value;
        var f = text2;
        text2 = null;
        sub2 = 20;
        // alert(sub1);
        while (document.getElementById(&quot;&quot; + sub2 + &quot;&quot;)) {//whileecode37
            if (sub1 == sub2) {
                alert(&quot;q&quot;);
            }
            else {
                document.getElementById(&quot;&quot; + sub2 + &quot;&quot;).style.background = &quot;#FFFFFF&quot;;
                //document.getElementById(&#39;Text1&#39;).value = -1;
                z = -1;
            }
            sub2++
        } //whileecode37
    } //ecode37
    if (e.keyCode == 8) {
        text2 = null;
        z = null;
    }


} //function
var theForm = document.forms[&#39;aspnetForm&#39;];
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>

Posted 12-Dec-10 19:37pm

sampath55

Updated 12-Dec-10 21:18pm

Abdul Quader Mamun

v3

Add a Solution

Comments

m@dhu 13-Dec-10 1:52am

Post the code only where you are facing the problem.

Sandeep Mewara 13-Dec-10 3:00am

Be specific!

Sandesh M Patil 13-Dec-10 8:11am

No one is going to read whole code.

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)