We help IT Professionals succeed at work.
Get Started

autosuggest styling in jquery

R8VI
R8VI asked
on
593 Views
Last Modified: 2012-05-09
Hi,

I need to style my autosuggest text box. How do i go about doing this I know i have to create a CSS file but what class or ID do i need to reference ?

I am attaching the jquery file and example aspx page

Please Help

Thanks,

r8VI
<%@ Page Language="C#" AutoEventWireup="true" Codebehind="Default.aspx.cs" Inherits="TypeSearch._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <link href="css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    <script src="js/jquery.autocomplete-min.js" type="text/javascript"></script>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            <label for="first">
                First Choice</label><input type="radio" name="searchRad" id="first" />
            <label for="second">
                Second Choice</label><input type="radio" name="searchRad" id="second" />
            <asp:TextBox runat="server" ID="txtSearch" />
        </div>

        <script type="text/javascript">

		$(document).ready(function(){

			//variable used to hold the service for the autocomplete
			var options = { serviceUrl:"Search_CS.ashx", params: {search_type : "CS"}, noCache: true };
			var autoComp = $("input[id$=txtSearch]").autocomplete(options);
			

			//variable to reference later when you want to change the serviceUrl
			   $("input[type=radio]").click(function(){
                    $("input[id$=txtSearch]").val("").focus(); 
                    
				  //check the id of the radio checked
				  if($(this).attr("id")=="first") {
						//change the target service url
						autoComp.setOptions({ params:{search_type : "CS"} });
				  } else {
						//change the target service url
						autoComp.setOptions({ params :{search_type : "LastName" } });
				  }
			   });

		});



        </script>

    </form>
</body>
</html>

Open in new window

jquery.autocomplete-min.js
Comment
Watch Question
CERTIFIED EXPERT
Commented:
This problem has been solved!
Unlock 1 Answer and 3 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE