ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Assign AJAX AutoComplete selected value to TextBoxes using jQuery in ASP.Net<p>Hi <a class="username" rel="nauna"> nauna</a>,</p> <p>Check the below example.</p> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <pre class="brush: html">&lt;div&gt; &lt;asp:ScriptManager ID=&#34;ScriptManager1&#34; runat=&#34;server&#34; EnablePageMethods=&#34;true&#34;&gt; &lt;/asp:ScriptManager&gt; &lt;table&gt; &lt;tr&gt; &lt;td&gt; Search Text: &lt;/td&gt; &lt;td&gt; &lt;asp:TextBox ID=&#34;txtEmployeeSearch&#34; runat=&#34;server&#34;&gt;&lt;/asp:TextBox&gt; &lt;cc1:AutoCompleteExtender ServiceMethod=&#34;SearchEmployees&#34; MinimumPrefixLength=&#34;1&#34; CompletionInterval=&#34;100&#34; EnableCaching=&#34;false&#34; CompletionSetCount=&#34;10&#34; TargetControlID=&#34;txtEmployeeSearch&#34; OnClientPopulated=&#34;Employees_Populated&#34; ID=&#34;AutoCompleteExtender1&#34; runat=&#34;server&#34; OnClientItemSelected=&#34;Employees_Selected&#34; FirstRowSelected=&#34;false&#34;&gt; &lt;/cc1:AutoCompleteExtender&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; First Name: &lt;/td&gt; &lt;td&gt; &lt;asp:TextBox runat=&#34;server&#34; ID=&#34;txtFirstName&#34; /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; Last Name: &lt;/td&gt; &lt;td&gt; &lt;asp:TextBox runat=&#34;server&#34; ID=&#34;txtLastName&#34; /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; City: &lt;/td&gt; &lt;td&gt; &lt;asp:TextBox runat=&#34;server&#34; ID=&#34;txtCity&#34; /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; Country: &lt;/td&gt; &lt;td&gt; &lt;asp:TextBox runat=&#34;server&#34; ID=&#34;txtCountry&#34; /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;div&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; function Employees_Populated(sender, e) { var employees = sender.get_completionList().childNodes; var div = &#34;&lt;table&gt;&#34;; div += &#34;&lt;tr&gt;&lt;th&gt;EmployeeId&lt;/th&gt;&lt;th&gt;FirstName&lt;/th&gt;&lt;th&gt;LastName&lt;/th&gt;&lt;th&gt;City&lt;/th&gt;&lt;th&gt;Country&lt;/th&gt;&lt;/tr&gt;&#34;; // assigned the Id value for the td to use later in Employees_Selected event for (var i = 0; i &lt; employees.length; i++) { div += &#34;&lt;tr&gt;&lt;td &gt;&#34; + employees[i].innerHTML.split(&#39;-&#39;)[0] + &#34;&lt;/td&gt;&lt;td id=F_&#34; + employees[i].innerHTML.split(&#39;-&#39;)[0] + &#34;&gt;&#34; + employees[i].innerHTML.split(&#39;-&#39;)[1] + &#34;&lt;/td&gt;&lt;td id=L_&#34; + employees[i].innerHTML.split(&#39;-&#39;)[0] + &#34;&gt;&#34; + employees[i].innerHTML.split(&#39;-&#39;)[2] + &#34;&lt;/td&gt;&lt;td id=Ci_&#34; + employees[i].innerHTML.split(&#39;-&#39;)[0] + &#34;&gt;&#34; + employees[i].innerHTML.split(&#39;-&#39;)[3] + &#34;&lt;/td&gt;&lt;td id=Co_&#34; + employees[i].innerHTML.split(&#39;-&#39;)[0] + &#34;&gt;&#34; + employees[i].innerHTML.split(&#39;-&#39;)[4] + &#34;&lt;/td&gt;&lt;/tr&gt;&#34;; } div += &#34;&lt;/table&gt;&#34;; sender._completionListElement.innerHTML = div; } function Employees_Selected(sender, e) { // Check only the clicked cell is Td or not if (e._item.tagName == &#34;TD&#34;) { // Get completionList child Node value var employees = sender.get_completionList().childNodes; // check each Td $.each($(employees).find(&#34;tr&#34;).find(&#34;td&#34;), function (i, item) { // check wheather td id is not blank and tdid same as clicked item td id if (item.id == e._item.id &amp;&amp; item.id != &#34;&#34;) { // Assign value of first closest td which is Id column value to textbox $(&#34;[id*=txtEmployeeSearch]&#34;).val($(this).closest(&#39;tr&#39;).find(&#39;td&#39;).eq(0).html()); $(&#34;[id*=txtFirstName]&#34;).val($(this).closest(&#39;tr&#39;).find(&#39;td&#39;).eq(1).html()); $(&#34;[id*=txtLastName]&#34;).val($(this).closest(&#39;tr&#39;).find(&#39;td&#39;).eq(2).html()); $(&#34;[id*=txtCity]&#34;).val($(this).closest(&#39;tr&#39;).find(&#39;td&#39;).eq(3).html()); $(&#34;[id*=txtCountry]&#34;).val($(this).closest(&#39;tr&#39;).find(&#39;td&#39;).eq(4).html()); return false; } }); } else { // clear the textbox if its not td in case $(&#34;[id*=txtEmployeeSearch]&#34;).val(&#39;&#39;); } } &lt;/script&gt; &lt;/div&gt;</pre> <p><strong><span style="text-decoration: underline;">Namespaces</span></strong></p> <p><strong>C#</strong></p> <pre class="brush: csharp">using System.Data.SqlClient; using System.Configuration; using System.Collections.Generic;</pre> <p><strong><span style="text-decoration: underline;">Code</span></strong></p> <p><strong>C#</strong></p> <pre class="brush: csharp">[System.Web.Script.Services.ScriptMethod()] [System.Web.Services.WebMethod] public static List&lt;string&gt; SearchEmployees(string prefixText, int count) { using (SqlConnection conn = new SqlConnection()) { conn.ConnectionString = ConfigurationManager.ConnectionStrings[&#34;constr&#34;].ConnectionString; using (SqlCommand cmd = new SqlCommand()) { cmd.CommandText = &#34;SELECT EmployeeId, FirstName, LastName,City,Country FROM Employees WHERE FirstName like @SearchText + &#39;%&#39;&#34;; cmd.Parameters.AddWithValue(&#34;@SearchText&#34;, prefixText); cmd.Connection = conn; conn.Open(); List&lt;string&gt; employees = new List&lt;string&gt;(); using (SqlDataReader sdr = cmd.ExecuteReader()) { while (sdr.Read()) { employees.Add(AjaxControlToolkit.AutoCompleteExtender .CreateAutoCompleteItem(string.Format(&#34;{0}-{1}-{2}-{3}-{4}&#34;, sdr[&#34;EmployeeId&#34;].ToString(), sdr[&#34;FirstName&#34;], sdr[&#34;LastName&#34;], sdr[&#34;City&#34;], sdr[&#34;Country&#34;]), sdr[&#34;EmployeeId&#34;].ToString())); } } conn.Close(); return employees; } } }</pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><img src="https://i.imgur.com/b1BJQqF.gif" alt="" width="472" height="239" /></p>https://www.aspforums.net:443/Threads/387321/Assign-AJAX-AutoComplete-selected-value-to-TextBoxes-using-jQuery-in-ASPNet/https://www.aspforums.net:443/Threads/387321/Assign-AJAX-AutoComplete-selected-value-to-TextBoxes-using-jQuery-in-ASPNet/Mon, 18 Jun 2018 02:29:03 GMT