We help IT Professionals succeed at work.

autosuggest styling in jquery

R8VI
R8VI asked
on
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

Author

Commented:
i suppose that would be good i jsut dont know how to go about doing it as i am not used to jquery CSS no problem
please go through the source code and demo of how they work. you should be just fine :)