CODEWITHSUNDEEP
jquery
Hellodan
Hellodan

Reputation: 1208

How do I stop my auto suggest drop down from showing before searching

Im using jquery to perform a live auto suggest drop down with a search bar on my site. but Im having an issue, how do I stop the auto suggest box from showing when there isnt anything in the field apart from the jquery example info

enter image description here

////// HTML form with Jquery

        <div id="searchbox_largesearcher_bg">

        <div id="searchbox_signalbg"></div>

        <form id="large-searcher" action="" method="post">

        <input name="large-search-form" id="large-search-form" type="text" size="35"  onfocus="if (this.value == 'Search A Genre e.g. &quot;Hip-Hop&quot;') this.value = '';" onblur="if (this.value == '') this.value = 'Search A Genre e.g. &quot;Hip-Hop&quot;';" maxlength="35" value="Search A Genre e.g. &quot;Hip-Hop&quot;"/>

         <input name="login" id="search_btn" class="search" type="submit" value="" />

         <div id="searchbox_searchicn"></div>
        </form>

        </div>

        <div class="dropdown">

            <ul class="results"></ul>

        </div>

////// CSS

.dropdown {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #F5F5F5;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px 2px -1px #000000;
    margin-left: 32px;
    margin-top: -12px;
    padding: 0;
    position: absolute;
    width: 460px;
    z-index: 99;
    }


.results {
    border: 1px solid #A2A1A1;
    border-radius: 5px 5px 5px 5px;
    list-style: none outside none;
    padding-bottom: 7px;
    padding-top: 7px;
    width: 458px;

    }

.results li{
    border-bottom: 1px solid #EDEDED;
    color: #A8A8A8;
    cursor: pointer;
    font-family: helvetica neue,helvetica,arial sans-serif;
    margin-left: 20px;
    margin-right: 20px;
    padding-bottom: 14px;
    padding-left: 25px;
    padding-top: 10px;

    }

.results li:hover{
    background: none repeat scroll 0 0 #EEEEEE;
    color: #A8A8A8;

    }

//////// Jquery for auto suggest

<script type="text/javascript">

// Large Index Page Live Returns Searcher

$(document).ready(function(){
$('#large-search-form').keyup(function() {

var search_term = $(this) .attr('value');

$.post('inc/resultsgrabber.php', {search_term:search_term}, function (data) {

$('.results').html(data); 

$('.results li').click(function() {
    var result_value = $ (this) .text();
    $('#large-search-form').attr('value', result_value);
    $('.results').html('');
    });


});


});

});

Upvotes: 0

Views: 511

Answers (2)

Hellodan
Hellodan

Reputation: 1208

turned out to be a CSS problem I had padding and borders in some wrong places. the jquery code was totally fine. sorry about that.

Upvotes: 0

codef0rmer
codef0rmer

Reputation: 10530

Best way to do that is to check if data response has any data in it after the ajax call. 

.results { display:none }


$.post('inc/resultsgrabber.php', {search_term:search_term}, function (data) {
  if (data == '') {
     $('.results').html(data); 
     .
     .
     .
     .
     .
   }
});

Upvotes: 1

Related Questions