CODEWITHSUNDEEP
javascriptjquery-uijquery-ui-autocomplete
DShultz
DShultz

Reputation: 4541

jQueryUI Autocomplete dropdown missing formatting

I'm trying to get jQueryUI Autocomplete to function in a local test page.

It looks fine on their demo page: https://jqueryui.com/autocomplete/#remote

However when I run it locally, with exactly the same demo code (with remote calls removed) it works fine, except the dropdown box doesn't display, just an ugly list with the ugly default black li bullets:

ugly formatting

So there's something outside of the code on that page formatting the ul into a cleaner dropdown menu. I don't see it. I could probably style it myself in a few minutes, but I'd rather just get this to work correctly.

And here's their demo code, tweaked to run locally against an array instead:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Remote datasource</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
  <style>
  .ui-autocomplete-loading {
    background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    function log( message ) {
      $( "<div>" ).text( message ).prependTo( "#log" );
      $( "#log" ).scrollTop( 0 );
    }

    $( "#birds" ).autocomplete({
      source: ["abc","def"],
      minLength: 2,
      select: function( event, ui ) {
        log( "Selected: " + ui.item.value + " aka " + ui.item.id );
      }
    });
  } );
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="birds">Birds: </label>
  <input id="birds">
</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
  Result:
  <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>


</body>
</html>

Upvotes: 1

Views: 1140

Answers (2)

Fifi
Fifi

Reputation: 3605

It is not the problem in your source code, but this also happens when you forget to add the jquery style sheet in the header:

<link rel="stylesheet" ref="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

This may help others.

Upvotes: 2

bigless
bigless

Reputation: 3091

I cant reproduce it. The demo code seems working.. Do you have any errors in console?

$( function() {
    function log( message ) {
      $( "<div>" ).text( message ).prependTo( "#log" );
      $( "#log" ).scrollTop( 0 );
    }

    $( "#birds" ).autocomplete({
      source: ["abc","def"],
      minLength: 2,
      select: function( event, ui ) {
        log( "Selected: " + ui.item.value + " aka " + ui.item.id );
      }
    });
  } );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
.ui-autocomplete-loading {
  background: white url("https://jqueryui.com/images/ui-anim_basic_16x16.gif") right center no-repeat;
}
</style>

<div class="ui-widget">
  <label for="birds">Birds: </label>
  <input id="birds">
</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
  Result:
  <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

Upvotes: 1

Related Questions