Jquery UI Autocomplete Customization

Asked

Viewed 680 times

0

Hello! I put the jquery ui autocomplete on my system, it’s working as it should, but I wanted to edit its look.

For example, put a background color in the suggestions that appear and do not allow the creation of a <div> when selecting a value.

That’s the image of the autocomplete as it is: [2]: https://i.stack.imgur.com/aPsc7.jpg

The autocomplete model I’m using is this https://jqueryui.com/autocomplete/#Multiple

jquery self-cmplete

  • You don’t show up the div with the search results?

  • I put another image, notice that when I select a value it adds a div below the form. That div I don’t want to appear

  • I didn’t understand. Which div?

  • It would be good if you put the code of how you are doing this, because the plugin does not have these buttons that you put in the image.

  • the buttons are from the application, I am using the ui only for the autocomplete. All the customization of the site is done with bootstrap

  • Yes, but which div do you refer to? You say that empty space below the input?

  • The text with the name of the city that is appearing below the for. Look, I selected "River of accounts" and he copied what’s in the input and created a div below the form with that value. But that’s the least, I really want to be able to put a background color in the box that appears the autocomplete suggestions

Show 2 more comments

1 answer

2


You can change the color of the search results box by changing the style of the search results via CSS div #ui-id-1, which is the div default of the plugin results:

<style>
#ui-id-1{
   background: red; /*fundo vermelho*/
}
</style>

Example:

$( function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  } );
#ui-id-1{
   background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

As to the div unwanted, you can inspect in the browser and pick up the class or id and hide in CSS via display: none.

  • I tried to customize the id you gave me, but it didn’t work. I’m using a different autocomplete model that you used in the example. I edited my question and put the model I’m using.

  • That’s the one I used.

  • I was able to take the "ui-menu-item" class. Now, the div that it creates at the end of the form has no id, no class. I can’t hide, or even allow him to create this div. I tried to read the JS file, but it is without indentation, impossible to read.

  • I managed to take the div also dvd. I had a class in it, I had not seen it. Thank you very much!

Browser other questions tagged jquery self-cmplete

You are not signed in. Login or sign up in order to post.