Giters

xdan / autocomplete

jQuery autocomplete plugin like Google autocomplete

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

jquery autocomplete values got disappear on mouse hover or on use of down arrow key

sonalisweet opened this issue · comments

commented

Hello team,
I am using below code for jquery autocomplete. But all jquery autocomplete values gets disappear on mouse hover or when i use down arrow key to select value. Could you please provide the solution for this.

In formview.ascx File :

<asp:TextBox ID="txtRootCause" runat="server" MaxLength="50" CssClass="txtboxForAutocomplete" Width="400px">/asp:TextBox

<script> var appid = $("#ITRP_UC_ClientLogout1_ddlApplicationList option:selected").val(); var prefixText = $("#<% =txtRootCause.ClientID%>").val(); $("#<% =txtRootCause.ClientID%>").autocomplete({ appendTo: '#autoCompleteRootCause', source: function (request, response) { if (request.term.length < 3) { return false; } $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "WFHome.aspx/GetRootCauseList", data: "{ prefixText:'" + request.term + "',count:'3', contextKey: '" + $("#ITRP_UC_ClientLogout1_ddlApplicationList option:selected").val() + "' }", dataType: "json", success: function (output) { response(output.d); }, error: function (errormsg) { alert(errormsg.responseText); } }) } }); </script>

I have tried by using below funtion in the code, but is is not working for me. Also i tried by keeping autoFocus : false directly, but that also not worked.

focus: function ( e, ui ) {
if ( e.keyCode === undefined ) {
return false;
}

One more thing. i am also facing in CSS Style of textbox dropdown values, the outline of box is not appearing. I am using below code in Style.css File :

.txtboxForAutocomplete {
width: 260px;
border: 1px solid #9c9c9c;
background-color: #f9f9f9;
padding: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #3d3d3d;
font-size: 12px;
text-align: left;
margin-top:3px;
}

Please help me on above issue. Any suggestion is appreciable.

commented

The error is caused because of a conflict that occurs when two jQuery UI files are loaded into the client's browser at the same time. If you peak into your section you will probably see you have two different jQuery UI files referenced there. Just remove one and it will work.

https://stackoverflow.com/questions/14748193/jquery-ui-autocomplete-menu-disappears-on-hover