Click here to Skip to main content
14,699,719 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hello, I'm currently struggling with getting the values of the text inputs from autocompletes to use in other portions of the page. I think it might be a scope thing, but I'm not solid on jquery, so I don't know how changing something in one place might break the script to begin with.

What I want to be able to do is to start typing in a company name, have it autocomplete, and then later when I click a button, I want the contents of that textbox to populate a label somewhere else. I also want to be able to run a query with that data to place into a data table, however, I think the solution to one will be the solution to the other.

What's happening now is that I cannot access anything from within the public static list, as everything beyond it appears to be in an outer scope, so assuming there's even a value assigned to the textbox, I can't reach it anyways.

Here's a list of the files in play:
- svcfunctions.js
- servicehub.aspx
- servicehub.apsx.cs

Starting with the snippet from the aspx:

</div>                <div class="large-4 columns">
                     <div class="demo">
                        <div class="ui-widget">
                            <input type="text" id="txtSearch" class="autosuggest"/>

Here's the snippet from the aspx.cs (code-behind):


public static List<string> GetAutoCompleteData(string companyname)
    List<string> result = new List<string>();
    using (SqlConnection con = new SqlConnection("Data Source=DATAX;Integrated Security=true;Initial Catalog=Archive"))
        using (SqlCommand cmd = new SqlCommand("SELECT DISTINCT CardName from [Archive].[dbo].[Customers] WHERE CardName LIKE @SearchText+'%'", con))
            cmd.Parameters.AddWithValue("@SearchText", companyname);
            SqlDataReader dr = cmd.ExecuteReader();
            while (dr.Read())
            return result;

Here's the snippet from the js:

$(document).ready(function () {
function SearchText() {
        minLength: 3,
        source: function (request, response) {
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "ServiceHub.aspx/GetAutoCompleteData",
                data: "{'companyname':'" + document.getElementById('txtSearch').value + "'}",
                dataType: "json",
                success: function (data) {

                error: function (result) {
                    alert("Error: Invalid SQL Query in AutoComplete (CardName)");

The autocomplete works fine, but I can't access the selected or held value sitting in the text box.

1 solution

Hi Check the below code
<script language="javascript">
    $(document).ready(function () {
            source: "/Home/GetAutosuggestBystateName/",
            minLength: 2,
            select: function (event, ui) {
                alert("State Id:" + ui.item.Id + "\n" + "State Name :" + ui.item.value);

For more detail check the link. this article is written in mvc. but have a look it will elp you.[^]
dfarr1 14-Nov-13 19:04pm
Perfect! That's exactly what I needed. Referring to my code, the SearchText2 function in svcfunctions.js was my guinea pig. BELOW the function for "source:" I put in the select function and tested both as displaying the selected value as well as what has become the contents of the textbox. Both worked. This is outstanding :)

For others: yeah, the source vinay.Singh linked as about MVC ASP.NET but it doesn't really matter. You should be putting your functions in a .js page, and the format of the controls you'll map with jquery are identical. The only part in the article that's different is the code that surrounds the functions, which is a bit superfluous as long as you've already got something to work with in your preferred model.

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

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900