JQuery UI Autocomplete Example

Admin   Jquery   149  2021-03-14 04:10:05

Hi Guys,

In this example,I will learn you how to use jquery ui autocomplete.you can easy use jquery ui autocomplete.

Autocomplete mechanism is frequently used in modern websites to provide the users a list of suggestion while typing the beginning word in the text box.

This feature prevents the users from having to enter an entire word or a set of words.

 

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>JQuery UI Autocomplete Example</title>

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

<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>

</head>

<style type="text/css">

.ui-widget{

text-align: center;

margin-top:40px;

}

label{

position: relative;

top:-10px;

font-size:20px;

}

input{

width: 30%;

padding: .375rem .75rem;

line-height: 1.5;

color: #495057;

border: 1px solid #ced4da;

border-radius: .25rem;

}

.ui-widget-content{

text-align: left;

}

</style>

<body>

<h2>JQuery UI Autocomplete Example - NiceSnippets.com</h2>

<div class="ui-widget">

<label for="tags">Search Tags: </label><br>

<input id="tags">

</div>

<script>

$( function() {

var availableTags = [

"Laravel",

"Bootstrap",

"jQuery",

"Php",

"C",

"C++",

"Ajax",

];

$("#tags").autocomplete({

source: availableTags

});

});

</script>

</body>

</html>

It will help you...