"Efficiently manage search suggestions and arrange outcomes for autofill text input utilizing jQuery

Is there a way to eliminate the message and structure the results in a sleek dropdown using CSS without relying on Bootstrap or pre-made CSS files?

http://jsfiddle.net/SCuas/96/

var aCleanData = ['test','test1','abcd','abee','abc5','test4','te7','tee'];

$('#test').autocomplete({
    source: aCleanData,
    minLength: 2,
    search: function(oEvent, oUi) {
        var sValue = $(oEvent.target).val();
        var aSearch = [];
        $(aCleanData).each(function(iIndex, sElement) {
            if (sElement.substr(0, sValue.length) == sValue) {
                aSearch.push(sElement);
            }
        });
        $(this).autocomplete('option', 'source', aSearch);
    }
});

and this is the HTML code <input id="test">

jquerycssautocompletereal-time

Answer №1

If you want to mark a message as failed and set the result message to null, you can achieve this by following the code example below: Check out a working demo on JSFiddle. Here is an array of clean data that will be used in the autocomplete feature: var aCleanData = ['test','test1','abcd','abee','abc5','test4','te7','tee'];

$('#test').autocomplete({
    source: aCleanData,
    minLength: 2,
    search: function(oEvent, oUi) {
        var sValue = $(oEvent.target).val();
        var aSearch = [];
        $(aCleanData).each(function(iIndex, sElement) {
            if (sElement.substr(0, sValue.length) == sValue) {
                aSearch.push(sElement);
            }
        });
        $(this).autocomplete('option', 'source', aSearch);
    },
    messages: {
        noResults: '',
        results: ''
    }
});

The filtered results are displayed in ul > li elements, which you can style according to your preferences.

For example:

.ui-autocomplete {
    width:100px;
    padding:0;
    margin:0;
    z-index:1000;
}
.ui-autocomplete li {
    background: #eee;
    text-align:left;
    cursor: pointer;
}
.ui-autocomplete li:hover {
    background: #ccc;
}
.ui-autocomplete li a {
    cursor: pointer;
    padding: 6px 10px;
    display: block;
}
.ui-autocomplete li a.ui-state-focus {
    background: #DE9C9C;
}

To add a scroll bar to your filter list dropdown, set a max-height:

.ui-autocomplete {
  max-height: 100px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 20px;
}

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

Troubleshooting ng-bind-html issue with displaying images loaded using CSS within HTML content

I followed the instructions provided in a related post on the same topic. I used 'ngSanitize' and formatted the HTML content using 'sce.trustAsHtml()', and it rendered correctly when the HTML contained both text and images. However, I e ...

javascriptcssangularjsng-bind-html

Achieving the grid-column property as you navigate deeper into the tree

Currently, I am in the process of integrating a CSS design that utilizes grid and grid-column into my Angular application. The design itself is quite effective, structured similar to this: .grid { display: grid; grid-template-columns: repeat(3, 1 ...

htmlcsscss-grid

An effective way to determine the size of a browser through javascript

In an effort to enhance the responsiveness of a website, I have included the following code snippet on one of my pages: document.write(screen.width+'x'+screen.height); However, I am encountering an issue where the code displays my screen resolu ...

javascriptjquerybrowser

Finding and removing a specific CSS pattern from a webpage that has been loaded

Encountered a troublesome Amazon.com page that appears blank in print preview, specifically the Online Return Center\Your Return Summary page. After much troubleshooting on a locally saved copy of the webpage, I pinpointed the issue to a problematic l ...

cssdeveloper-tools

The mobile devices are not showing my HTML website

I have implemented the following CSS link code on my website: <link rel="stylesheet" href="index_files/front.css" media="all" type="text/css" > Additionally, I have included the following code <meta name="HandheldFriendly" content="True"> & ...

javascriptandroidjqueryhtmlcss

AngularJS enhances user experience by allowing textareas to expand upon click

I am just starting to learn about angular.js and I'm wondering how to add a text area when clicking on an image. ....... ..... ..... </thead> <tbody> <tr ng-repeat="stu in Studentlist"> <td>{{stu.rollno}}</td> <td> ...

javascriptjqueryhtmlangularjs

Dealing with a Jquery/Javascript Dilemma

As a beginner in query/javascript, I am encountering an issue with the code below when trying to calculate gross value and tax amount based on the net amount entered by the user. The input is expected to be a double amount, with gross and VAT amounts defin ...

javascriptjquery

Enhanced User Experience Through Triggered Content Recommendations based on Scrolling Patterns

When a user scrolls beyond a certain point on a webpage, I would like a recommended content popup to slide out from the right side at the bottom of the page. An excellent example can be seen on USAToday where a blue recommended box appears as you scroll d ...

javascriptjqueryhtmlscroll

Alignment of text fields in a vertical manner

How can I vertically align text input fields using CSS? <form action='<?= $_SERVER['PHP_SELF']; ?>' method='post'> <p><label for='username' class=''>Username:</label& ...

cssvertical-alignment

Words placed in the middle of the picture

<div> <img style="vertical-align:middle" src="https://placehold.it/60x60"> <span style="">New Product</span> </div> I require this specific layout to be responsive. Could you please provide instructions on achieving this? ...

htmlcssimagesass

Placing information on the opposite sides of a table cell

I am currently working on a monthly calendar table where each cell displays the date in the top left corner and has a "+" button in the bottom right corner for adding content to that day. Everything works fine when all cells have the same height, but it br ...

css

What's the best way to implement a font family in a React component?

I'm currently attempting to implement the font found at: https://fonts.google.com/specimen/Source+Code+Pro After downloading the font into my directory, it appears as shown in this image: enter image description here This is how I have it set up: &l ...

cssreactjsfonts

switch from ajax response to spring boot

I have encountered a situation that requires me to handle results obtained from an AJAX call in my Spring Boot controller. These results are displayed in a jQuery-accordion as per our customer's request. Now, the user should be directed back to the Sp ...

jqueryajaxspringspring-boot

Looking for ways to incorporate both external and internal styling using jQuery and CSS in my template?

I've been working on a django project for a while now, and I'm facing some challenges with getting external and internal CSS to work. Only inline CSS seems to be functioning properly. I have two questions: How can I get external or internal C ...

jqueryhtmlcssdjangodjango-crispy-forms

Ways to create a clickable red button

I'm working with bootstrap, CSS, and particle.js for this project. I have also linked a custom CSS file here. However, when I apply bootstrap and particle.js, the red color generate password button becomes unclickable. After checking in Chrome dev too ...

htmlcsstwitter-bootstrapbootstrap-4particles.js

Retrieving crucial information from mySQL using jQuery

I have the following jQuery function: $.ajax({ type: "POST", url: "db.php", data: "word="+ tmpWord, success: function(){ //get the word here somehow ^_^ } }); Here is a snippet from db.php: $word = ...

phpjquerymysqlajax

What steps can I take to avoid page displacement when implementing jQuery ajax tabs?

There are numerous inquiries regarding this issue, and it appears that some are very similar to what I am looking for, such as: JQuery UI Tabs Causing Screen to "Jump" Stop jquery TABS from jumping / scrolling up when clicked on? Jquery tabs: How do I ...

jqueryajaxtabspage-jump

Create a layout consisting of two rows, each containing three blocks. Ensure that the layout is responsive by using only HTML and CSS, without relying

Hello there! I am looking to create a responsive layout without using bootstrap or any other framework..... I want to build it from scratch. https://i.stack.imgur.com/GAOkh.png I am aiming for responsive blocks that collapse into one column when the page ...

htmlcss

Is there a way to retrieve the row and parent width from a Bootstrap and Aurelia application?

Is there a way to determine the exact width of a bootstrap grid row or grid container in pixels using Aurelia? I attempted to find this information on the bootstrap website, but I am still unsure as there are multiple width dimensions such as col-xs, colm ...

javascriptcssbootstrap-4aurelia

Unconventional appearance of WordPress Jetpack sharing buttons on unique custom theme

Currently, my wordpress blog has a unique theme and is powered by Jetpack. I've activated Sharing and added various social media sharing services like Facebook, Twitter, Google+, Digg, among others in the "Enabled Settings" section. However, the sha ...

phphtmlcsswordpress