1

这是我的下拉菜单的 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();
}

onfocus当文本框上发生事件时触发

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

2 回答 2

1

尝试在焦点上搜索默认值，FIDDLE

$("#tags").focus(function () {
    $(this).autocomplete('search', 'a');
});
于 2013-11-13T04:52:03.103 回答
0

它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}})" />

脚本

$('#id_q').one('click',function(){
    showsuggestion();
});
于 2013-11-13T04:43:25.777 回答