CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Anurag Sharma
Anurag Sharma

Reputation: 5039

Show dropdown menu on click

This is the CSS for my dropdown menu:

<style type="text/css" media="screen">
      /*body {
        font-family: Arial, Verdana, sans-serif;
        font-size: 14px;
      }*/
    .ui-autocomplete {
      padding: 0;
      list-style: none;
      background-color: #fff;
      width: 218px;
      border: 1px solid #B0BECA;
      max-height: 250px;
      overflow-y:hidden;
    }
    .ui-autocomplete .ui-menu-item a {
      border-top: 1px solid #B0BECA;
      display: block;
      padding: 4px 6px;
      color: #353D44;
      cursor: pointer;
    }
    .ui-autocomplete .ui-menu-item:first-child a {
      border-top: none;
    }
    .ui-autocomplete .ui-menu-item a.ui-state-hover {
      background-color: #D5E5F4;
      color: #161A1C;
    }

    </style>

It is been linked to a text box. I would like to show my drop down menu when a user clicks on the text box for the first time.

I tried to write this function in JavaScript

function showsuggestion(){

  $('.ui-autocomplete').show();
}

which is fired when the onfocus event occurs on the text box

HTML Structure:

<div class="left searchtop myCorner1 searchtopinside" id="suggestionbox">
  <form method="get" action="{% url simplesearch %}" name="searchform" onsubmit="return search('searchform',this);">
    <ul>
      <li><strong>Search</strong></li>
            <li><select name="q" id="id_q" autocorrect="off" autocomplete="off"  style="width:260px;" onfocus="hide_msg('autosuggest','Enter Institute or Course Name'); showsuggestion();" onblur="show_msg(this,'Enter Institute or Course Name' )" onkeyup="javascript:keyup({{lenletters}})">

            <li><input type="text" class="text2" value="Enter Location" name="location" id="id_location" onfocus="hide_msg('id_location','Enter Location')" onblur="show_msg(this,'Enter Location' )" /></li> 
           <!--<li class='enter_loc'><input type="text" class="text2" value="Enter Location" name="location" id="id_autocomplete" onfocus="shows_div();set_css();set_css1();set_css2();"  onkeyup="div_autocomplete()" /></li>
           {% include 'widgets/city_state_widget.html' %} -->
      <li><input type="submit" class="button_new_big " value="Search" onclick="event_tracking()"/><div class="button_big_Ending"></div></li>

        </ul>
    </form>
</div>

Upvotes: 1

Views: 947

Answers (2)

rajesh kakawat
rajesh kakawat

Reputation: 10896

try to search default value on focus,FIDDLE

$("#tags").focus(function () {
    $(this).autocomplete('search', 'a');
});

Upvotes: 1

Rohan Kumar
Rohan Kumar

Reputation: 40639

It is input element not select and try to use one() like,

 <input name="q" id="id_q" autocorrect="off" autocomplete="off" style="width:260px;"
  onfocus="hide_msg('autosuggest','Enter Institute or Course Name');" 
  onblur="show_msg(this,'Enter Institute or Course Name' )" 
  onkeyup="javascript:keyup({{lenletters}})" />

SCRIPT

$('#id_q').one('click',function(){
    showsuggestion();
});

Upvotes: 0

Related Questions