Tips on adding style to your jQuery autocomplete dropdown

I am currently utilizing jQuery autocomplete functionality.

I have configured it to communicate with a service and retrieve records:

<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() {

    $( "#tags" ).autocomplete({
      source: "/autocomplete/",
      minLength: 3,
      select: function( event, ui ) {

      }
    });
  } );
</script>

Upon receiving the dropdown list, it lacks any styling.

The provided documentation at: http://api.jqueryui.com/autocomplete/ mainly discusses the JavaScript functionality.

Is there a way to customize the style of the dropdown containing the search results?

javascriptjquerycssjquery-ui-autocomplete

Answer №1

Here is a great example I discovered: Check out this JQuery autocomplete result style

.ui-autocomplete { position: absolute; cursor: default; background:#CCC }   

/* Workarounds */
html .ui-autocomplete { width:1px; } /* Necessary to prevent menu from expanding to 100% in IE6 */
.ui-menu {
    list-style:none;
    padding: 2px;
    margin: 0;
    display:block;
    float: left;
}
.ui-menu .ui-menu {
    margin-top: -3px;
}
.ui-menu .ui-menu-item {
    margin:0;
    padding: 0;
    zoom: 1;
    float: left;
    clear: left;
    width: 100%;
}
.ui-menu .ui-menu-item a {
    text-decoration:none;
    display:block;
    padding:.2em .4em;
    line-height:1.5;
    zoom:1;
}
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
    font-weight: normal;
    margin: -1px;
}

Answer №2

The list of suggestions in the autocomplete feature consists of li elements with the class ui-menu-item.

To see the autocomplete dropdown in action, type "H" in the example below.

$( "#tags" ).autocomplete({
  source: ["Hello.","How are you?","Hi!"],
  minLength: 1,
  select: function( event, ui ) {

  }
});
.ui-autocomplete .ui-menu-item{
  font-style:italic;
  color:blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>

<input id="tags">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Divs are not properly positioned

I’m struggling to align three divs in a row, each with unique cosmetic styles. Two have images on the left and right sides, while the middle one contains a text-filled div. While I’ve managed to fit the image in the divs just fine, the middle div with ...

htmlcss

Unable to focus on the same DOM element multiple times - Vue.js

Apologies for any syntax errors, although the code is functioning perfectly. There may have been a mistake during the copying process. Situation: I am facing an issue with a component called 'dropdown', which is repeated three times using v-for= ...

javascriptdomframeworksvue.jsvuejs2

poor scrolling performance when transitioning focus between elements in the interface

Looking for some assistance? Check out this codepen. I'm currently working on a search bar widget that allows navigation from the input field to the search results, displayed as a series of divs. The navigation is controlled via jquery, where the foc ...

jqueryhtmlcss

When hovering over slick text, it becomes hidden because of non-responsive CSS. Are there any solutions to make it responsive?

I can't seem to get the on-hover dates to appear, even though they are rendered when inspecting the page. I suspect it could be related to a responsive CSS issue or class breaking. How can I resolve this? https://i.stack.imgur.com/jyEJb.png https:// ...

javascriptphphtmlcss

What is the process for adjusting the position following the modification of a table value in React?

In my React UI, I have set up two text fields for entering values. After saving the values, they are displayed in a table below (designed with antd). When I click on a record in the table to edit it, I want the data from that record to populate the text f ...

javascripthtmlcssreactjsantd

What is the appropriate way to utilize `render_template` from Flask within Angular?

I'm facing an issue where I need to implement different routes for various Angular Material tabs. I have attempted to directly call Flask from the template, as demonstrated below, but unfortunately, I am unable to invoke render_template from Angular. ...

javascriptangularjspython-3.xflask

Can you explain the meaning behind this TypeScript variable declaration syntax?

Can anyone explain the meaning of this code snippet: myCollection: Collection|any = null; I'm having trouble understanding it... Does it indicate that myCollection is set to type Collection, (which is an interface), with a default value of null? But ...

javascriptangulartypescript

The width of Bootstrap 5.3.0 form checkboxes varies between options

CSS input[type='checkbox'] { transform: scale( 2 ); margin-right: 1.5em; } Html <div class="form-check d-flex align-items-center mb-3"> <input class="form-check-input" type="checkbox" value=&quo ...

cssbootstrap-5

Utilizing JQuery's printThis Plugin in Combination with the Style Attribute

I am currently working on a JavaScript app and I am trying to implement a button that will allow users to print a specific div. To achieve this, I am utilizing a jQuery plugin called printThis (github link) as well as attempting to use window.print(). $(" ...

javascriptjqueryhtmlcss

Padding for the initial element in a carousel display

I am currently working on implementing owl carousel with stage padding. My goal is to use the carousel with loop:false, and have the first item displayed without left padding, while maintaining consistent padding for both items on the left and right after ...

javascriptjqueryhtmlcss

Sending messages through a Discord Bot without the use of a command

I have code that is constantly running in the background in JavaScript, 24/7. I am looking to configure a discord.js bot to send a notification message if any issues or errors occur within the code. Is there a way to send a message to any channel without ...

javascriptdiscorddiscord.js

Obtaining data from the following entry in JSON format using the Twitter API

I am currently developing a webpage that showcases user tweets, however I want to visually represent the gap in time between each tweet by displaying empty spaces. I have been struggling with the logic of how to achieve this task and haven't made muc ...

javascriptjqueryjsontwitter

What is the method for altering the text color within a disabled input field?

Currently facing difficulty in changing the color of the text within the input field when it's disabled. I'm utilizing Material UI for this purpose. import React from "react"; import { makeStyles } from "@material-ui/core/st ...

htmlcssreactjsmaterial-ui

Utilizing Supabase queries alongside React's Hot Toast Promise: A Comprehensive Guide

I'm currently working on an admin panel to manage my website. As part of the development, I am using Supabase for the Database and React Hot Toast for notifications. Recently, I attempted to implement Toast Promise using the following code: const add ...

javascriptreactjssupabasereact-hot-toast

Is the dropping of the middle section in the inline list imminent?

After creating a fiddle to check for conflicts with other styles on my page, I ran into an issue with an inline list. There seems to be a slight drop in the middle item's positioning that I can't figure out. Despite trying various margin adjustme ...

htmlcsshtml-lists

How can PHP be used to decode JSON and transmit it to Javascript?

I am aiming to utilize the Twitter API in order to dynamically populate slides on a webpage with recent tweets without needing to refresh the entire page. Currently, my approach involves making an AJAX call every few seconds from a JavaScript function on ...

javascriptphpjqueryjsontwitter

Wait until the link is clicked before showing the list element

Is there a way to prevent the display of list element id="two" in the code below until link "#two" has been clicked, removing element id="one"? I am looking for a CSS or JS solution that completely hides the list element rather than just hiding it from vie ...

javascriptjqueryhtmlcss

Struggling with CSS float problems

I'm currently working with the Pure CSS framework and my code resembles this: <div class="container pure-g"> <header class='pure-u-1'> <h1 class='logo'> <a href="#">TEST</a> </h1> &l ...

htmlcssyui-pure-css

What are some ways to manipulate JSON data following a successful AJAX request?

I've been grappling with this issue for quite some time now, trying various methods without any success. I won't bore you with the details of my failed attempts, but instead, I'll show you the code I'm currently working with. Here' ...

javascriptajaxjsonknockout.js

Interactive Geography Selector

When updating your personal details on , you are required to choose your country first. Once the country is selected, the system automatically adjusts the city and/or state options based on that specific country's requirements. Can someone provide exa ...

javascriptjqueryhtmlajaxdhtml