CODEWITHSUNDEEP
jqueryjquery-ui
Mike
Mike

Reputation: 59

Jquery-ui autocomplete won't work in a specific only

Been trying for 2 days and appreciate any help. I can get autocomplete to work outside of the div I am trying to make it work in. The specific div, input field, does not work.

I have tried as others mentioned setting the .ui-autocomplete { z-index: 50000 !important; } to the class, but still doesn't work.

Here is a link to the test page. The div is "destinations" front and center. http://www.inidaho.com/responsive/test4.asp

Here is my header code:

<link rel="stylesheet" media="screen" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" media="screen" href="css/bootstrap.min.css">
<link rel="stylesheet" media="screen" href="css/glyphicons.css">
<link rel="stylesheet" media="screen" href="css/iitheme.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900,100italic,300italic,400italic,500italic,700italic,900italic' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran"
];
$("#destination").autocomplete({
source: availableTags
});
});
</script>

and here is the input I am trying to autocomplete

<form id="home-searchform" class="home-searchform">
<div class="col-lg-8 col-med-5 col-sm-4 col-xs-12 text-center ui-widget">
<label for="destination">destination</label>
<input id="destination" name="destination" placeholder="Choose Destination">
</div>
<div class="col-lg-4 col-med-3 col-sm-3 col-xs-12">
<input type="button" name="submit" value="GO" class="ui-btn med ui-main txt-    center"/>
</div>
</form>

I have tried to format the code above correctly, but am having trouble so apologize. Any suggestions are appreciated. Best.

Upvotes: 0

Views: 454

Answers (1)

Scott &#39;scm6079&#39;
Scott &#39;scm6079&#39;

Reputation: 1567

Your code is fine as posted here, but in the page you reference, you have two inputs with the ID of "destination". That is causing your problem. If you rename the ID of one of them, your code works.

For example:

HTML:

<input id="destinationMain" name="destination" placeholder="Choose Destination">

JavaScript:

$("#destinationMain").autocomplete({
    source: availableTags
});

Upvotes: 1

Related Questions