Question

我有这样的下拉菜单css

<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>

它已链接到文本框。我想在用户第一次点击文本框时显示我的下拉菜单。

我试着在javascript上写这个函数

function showsuggestion(){

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

当＆＃34; onfocus＆＃34;文本框上的事件ocur

HTML结构 -

<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>

Answer 1

尝试搜索焦点上的默认值 FIDDLE

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

Answer 2

input element而不是select并尝试使用one()之类的，

 <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();
});

点击显示下拉菜单

2 个答案: