JSFiddle - React, Tailwind, and code Playground

by AaronLayton

HTML

<div class="mainsearch">
    
    <form action="/" method="get" id="search">
        <div class="textborder">
            <input type="text" id="q" name="q" class="searchBox" autocomplete="off" placeholder="Search for products">
        </div>
        <a href="#" title="Search" class="searchBtn">Search</a>
    </form>
    
    <div class="aSearchDrop popupPanel">
        <div class="aSearchContent">Test</div>
    </div>
</div>

CSS

.mainsearch {
    clear:both;
    float:left;
    height: 22px;
    position: relative;
    width: 244px;
    z-index:1;
}

.mainsearch div.textborder {
    background: white;
    border: 1px solid #b5b5b5;
    float:left;
    height: 18px;
    overflow: hidden;
    padding:2px 0 0 5px;
    position: relative;
    width: 170px;
}

.ie6 .mainsearch div.textborder, .ie7 .mainsearch div.textborder { height: 19px;padding:1px 0 0 5px; }

.mainsearch div.textborder input {
    border: none;
    color: #7f7f7f;
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    outline: none;
    width: 145px;
    border-color: transparent;
}

.mainsearch .searchBtn {
    background:#000;
    color:#fff;
    font-family:arial;
    font-size:10px;
    height: 22px;
    line-height: 22px;
    margin:0;
    position:absolute;
    right:3px;
    text-align:center;
    text-decoration:none;
    top:0px;
    width:60px;
}
.ie6 .mainsearch .searchBtn { right:-1px; }





/* __AjaxSearch - Jun 2011 - Aaron */

.aSearchDrop {
    display:none;
    left:0;
    padding: 10px 13px;
    position:absolute;
    top:100%;
    width:350px; 
}
.aSearchDrop a strong { color:#ee2e39;font-weight:normal; }
.aSearchDrop .autoList { list-style:none;margin:0 0 5px;padding:0; }
.aSearchDrop .autoList li {margin:0;padding:0;line-height:20px;height:1%;}
.aSearchDrop .autoList a { display:block;color:#555;font-size:11px;text-decoration:none;text-indent:5px;text-transform:uppercase; }
.aSearchDrop .autoList a:hover {background:#f1f1f1;}

.aSearchDrop .ajaxRelated h3 { font-family:"Gill Sans", "Gill Sans MT", sans-serif;font-size:14px;font-weight:normal;text-transform:uppercase; }
.aSearchDrop .ajaxRelated h3 a { font-size:11px;text-decoration:none; }
.aSearchDrop .product {
    background:#fff;
    border: 1px solid #F0F0F0;
    clear: left;
    float: left;
    padding: 10px;
    position: relative;
    width: 324px;
}

.aSearchDrop .ajaxRelated .hovered {
   ...

JavaScript

// AJAX Product Search

function SetupAjaxSearch() {
    var $searchBox = $('.searchBox');                         // Link to your main search box
    var outerContainer = '.mainsearch';                       // Link to your outer container
    
    var keypressTimeout = 300;                                // Timeout between key presses
    var searchURL = '/ProductArea/Ajax/AjaxSearch.aspx?q=';   // URL of the search
    
    
    
    var searchTimeout;

    $searchBox.focus(function(){
        var $searchContent = $searchBox.parents(outerContainer).find('.aSearchContent');

        if ($searchContent.html() != ""){
            $searchBox.parents(outerContainer).find('.aSearchDrop').fadeIn(150);
        }
    }).blur(function(){
        $searchBox.parents(outerContainer).find('.aSearchDrop').fadeOut(150);
    }).keyup(function(){
        if ($searchBox.val()) {
            // Clear any other timeouts
            clearTimeout(searchTimeout);

            // Make a new request
            searchTimeout = setTimeout(function() {
                // Set the loading information
                $searchBox.parents(outerContainer).find('.aSearchContent').html('<img src="/img/skin/jun11/ajax-search.gif" alt="Loading" height="16" width="16" /> Searching');

                // Form the URL to load
                var loadURL = searchURL  + $searchBox.val();
                
                //[TEMP]
                loadURL ="http://jsfiddle.net/echo/jsonp/";
                
                
                $.ajax({ url: loadURL, cache: true, type: "GET", success: function(html) {
                    // Set the contents to what ever was returned
                    $searchBox.parents(outerContainer).find('.aSearchContent').html(html);
                        
                    // If the search box isn't visible then show it
                    if (!$searchBox.parents(outerContainer).find('.aSearchDrop').is(':visible')){
                       ...