我正在使用Gary's for slow lists的扩展自动完成小部件,而且效果非常好。
但我的旧版慢版本以幻灯片效果运行。当我尝试使用具有幻灯片效果的新窗口小部件时,列表显示在页面左侧而不是右侧的选择框下,并且在再次单击搜索按钮时不会消失。有人可以提出解决方案吗?
我的代码:
function showList(){
if (!$.ui) // needed for $ conflict between jquery and jquery-ui for .effect
{
$.noConflict( true );
}
if ($("div#searchInput").css("display") === "none"){
$("button#searchButton").click();
$("div#searchInput").css({"display": "block"})
.effect( "slide", {direction:"right"}, 500 );
}
else {
$("div#searchInput").hide( "slide", {direction:"right"}, 500 );
}
}
#searchIcon {
height: 1em;
width: 1em;
float: right;
z-index:1;
position: absolute;
right:0px;
margin-right: 25px;
background: #c4cdd4;
}
#searchDiv {
width: 175px;
float: right;
margin-right: 40px;
}
#searchInput {
float: left;
position: relative;
display:none;
}
#searchSelect {
width: 170px;
background: #c4cdd4;
}
#searchButton {
display:none;
}
input {
width: 174px;
background: white;
/*background: transparent !important;*/
}
ul#ui-id-1{
/*background: transparent !important;*/
background-color: #c4cdd4;
width: 170px;
}
a {
font-family: Arial, sans-serif;
font-size: 16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="searchIcon">
<img src="/file/images/search_icon.png" alt="Search" onclick="showList()">
</div>
<div id="searchDiv">
<div id="searchInput">
<select id="searchSelect" onchange="searchWidget()"></select>
</div>
</div>