locked
How to display bold text after returning values using the AutoCompleteExtender RRS feed

  • Question

  • User-196219249 posted

    Hello to all,

    I was wondering if there is away to display bold or color text within the returning values from an AutoCompleteExtender?

    For an example if I type 'Th' to search a name of some movie in the textbox, I should get some values like this:

    The body snatchers
    The man with one red shoe
    The texas chainsaw massacre

    I would like to display the values like this:

    Movie: The body snatchers
    Movie: The man with one red shoe
    Movie: The texas chainsaw massacre

    Is this possible?

     

    Here is my code behind in vb.net:

    <script runat="server">      

        <System.Web.Script.Services.ScriptMethod(), _
        System.Web.Services.WebMethod()> _

    Public Shared Function GetSuggestions(ByVal prefixText As String, ByVal count As Integer) As List(Of String)     

    Dim MyConnection As String = WebConfigurationManager.ConnectionStrings("MiscConnectionString").ConnectionString
    Dim con As SqlConnection = New SqlConnection(MyConnection)
    Dim cmd As SqlCommand = New SqlCommand()

    cmd.Connection = con
    cmd.CommandText ="select cust_no, insured_name, mail_city, actual_location from acctinfo where cust_no LIKE @SearchText + '%' OR insured_name LIKE @SearchText + '%' OR mail_city LIKE @SearchText + '%' OR actual_location LIKE @SearchText + '%'"
    cmd.Parameters.AddWithValue("@SearchText", prefixText)
    cmd.CommandType = CommandType.Text              

            con.Open()
            Dim customers As List(Of String) = New List(Of String)
       
    Dim x As List(Of String) = New List(Of String)
       
    Dim reader As SqlDataReader = cmd.ExecuteReader


      
    While reader.Read()
    customers.Add(reader("cust_no").ToString() + " - " + "Insured Name: " + reader("insured_name").ToString.Trim() + " - " + "Mail City: " + reader("mail_city").ToString.Trim() + " - " + "Location: " + reader("actual_location").ToString.Trim()) 
      End While

            con.Close()

    Return customers

    End Function

       

    </script>

     

     

    Thursday, August 28, 2014 11:34 AM

Answers

  • User-1360095595 posted

    Success!

    Here's what I did... Make sure you include the jQuery library because that's what I used...

    <asp:TextBox ID="TextBox1" runat="server" AutoCompleteType="Disabled"></asp:TextBox>
    <asp:AutoCompleteExtender ID="TextBox1_AutoCompleteExtender" runat="server" DelimiterCharacters=""
    	Enabled="True" TargetControlID="TextBox1" ServicePath="~/MyService.asmx" ServiceMethod="GetData"
    	CompletionInterval="500" MinimumPrefixLength="2" OnClientShowing="showing">
    </asp:AutoCompleteExtender>
    
    
    ...
    
    <script type="text/javascript">
    	function showing(e, args) {
    		$.each(e._completionListElement.childNodes, function (key, value) {
    			value.innerHTML = value.innerHTML.replace('Movie', '<b>Movie</b>');
    
    		});
    	}
    </script>
    
    

    This replaced any occurrence of the word "Movie" with a bold "Movie" in the completion list that pops up when matches are found.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 28, 2014 2:39 PM

All replies

  • User-1360095595 posted

    Have you tried returning html formated results? Not sure it works but worth a quick try. So you'd return for example: <b>Movie</b>: blah blah

    Thursday, August 28, 2014 11:38 AM
  • User-196219249 posted

    Yes I tried that earlier but the quotation marks doesn't reconize the html tags. It will return exactly <b>Movie</b>.

    Thanks for the reply!

    Thursday, August 28, 2014 1:13 PM
  • User-1360095595 posted

    Yes. I tested it a little while ago and it didn't work. 

    There's a way to hook into the auto complete list client side. I think you can manipulate the results there. I'll test it out a report back a bit later. 

    Thursday, August 28, 2014 1:35 PM
  • User-196219249 posted

    Thanks!

    Thursday, August 28, 2014 2:04 PM
  • User-1360095595 posted

    Success!

    Here's what I did... Make sure you include the jQuery library because that's what I used...

    <asp:TextBox ID="TextBox1" runat="server" AutoCompleteType="Disabled"></asp:TextBox>
    <asp:AutoCompleteExtender ID="TextBox1_AutoCompleteExtender" runat="server" DelimiterCharacters=""
    	Enabled="True" TargetControlID="TextBox1" ServicePath="~/MyService.asmx" ServiceMethod="GetData"
    	CompletionInterval="500" MinimumPrefixLength="2" OnClientShowing="showing">
    </asp:AutoCompleteExtender>
    
    
    ...
    
    <script type="text/javascript">
    	function showing(e, args) {
    		$.each(e._completionListElement.childNodes, function (key, value) {
    			value.innerHTML = value.innerHTML.replace('Movie', '<b>Movie</b>');
    
    		});
    	}
    </script>
    
    

    This replaced any occurrence of the word "Movie" with a bold "Movie" in the completion list that pops up when matches are found.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 28, 2014 2:39 PM
  • User-196219249 posted

    Good job MetalAsp!!!! That worked perfectly!

    Thursday, August 28, 2014 3:13 PM