Jquery Autocomplete | Code2night.com
Code2night
  • Home
  • Blogs
  • Guest Posts
  • Tutorial
  • Post Blog
  • Register
  • Login
  1. Home
  2. Blogpost

Jquery Autocomplete

Date- Sep 06,2021

6278

Free Download Pay & Download
Jquery Autocomplete Autocomplete

So, starting from the beginning we will need few libraries for using Jquery Autocomplete . Basically, that is included in Jquery UI js. So we need to add these scripts in our webpage


<link rel="stylesheet" href="//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>

So, after adding these scripts in the head section of your webpage. We have to add this code in our webpage

 <script>
        

        $(document).ready(function () {

            var datalist = ["hindi", "english", "math", "science", "geography", "socialscience", "sanskrit"]
            $("#TestAutocomplete").autocomplete({
                source: datalist,

                response: function (event, ui) {
                    ui.content.push({
                        value: '', label: "Add new item"
                    });
                    ui.content.push({
                        value: event.target.value, label: event.target.value
                    });
                },


            }).data("ui-autocomplete")._renderItem = function (ul, item) {
                if (item.value == '') {
                    return $('<li class="ui-state-disabled" style="padding-left:5px;">' + item.label + '</li>').appendTo(ul);
                }
                var expression = new RegExp(this.term, 'gi');
                var highlight = item.label.replace(expression, "<span style='font-weight:bold;'>" + this.term + "</span>")
                return $("<li>")
                    .append("<a>" + highlight + "</a>")
                    .appendTo(ul);


            }
        })



    </script>

So, this function will be placed in document ready which will initialize the autocomplete. You will notice that we have create a array variable there. Which contains all the items of the Autocomplete.

.data("ui-autocomplete")._renderItem = function (ul, item) {
                if (item.value == '') {
                    return $('<li class="ui-state-disabled" style="padding-left:5px;">' + item.label + '</li>').appendTo(ul);
                }
                var expression = new RegExp(this.term, 'gi');
                var highlight = item.label.replace(expression, "<span style='font-weight:bold;'>" + this.term + "</span>")
                return $("<li>")
                    .append("<a>" + highlight + "</a>")
                    .appendTo(ul);


            }

This method is fired whenever Jquery Autocomplete tries to create html for rendering. Here we have adding bold wherever searche text is found.

@{
    ViewData["Title"] = "Autocomplete";
}
<style>

    .ui-state-active,
    .ui-widget-content .ui-state-active,
    .ui-widget-header .ui-state-active,
    a.ui-button:active,
    .ui-button:active,
    .ui-button.ui-state-active:hover {
        background: transparent !important;
        font-weight: normal;
        color: black !important;
        width: 100% !important;
        min-width: 200px !important;
        border:0px!important;
    }
</style>

<link rel="stylesheet" href="//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>


<div style="margin-top:50px;">
    <label for="TestAutocomplete">Subjects</label>
    <input type="text" id="TestAutocomplete" class="validate" />


</div>
@section scripts{
    <script>
        

        $(document).ready(function () {

            var datalist = ["hindi", "english", "math", "science", "geography", "socialscience", "sanskrit"]
            $("#TestAutocomplete").autocomplete({
                source: datalist,

                response: function (event, ui) {
                    ui.content.push({
                        value: '', label: "Add new item"
                    });
                    ui.content.push({
                        value: event.target.value, label: event.target.value
                    });
                },


            }).data("ui-autocomplete")._renderItem = function (ul, item) {
                if (item.value == '') {
                    return $('<li class="ui-state-disabled" style="padding-left:5px;">' + item.label + '</li>').appendTo(ul);
                }
                var expression = new RegExp(this.term, 'gi');
                var highlight = item.label.replace(expression, "<span style='font-weight:bold;'>" + this.term + "</span>")
                return $("<li>")
                    .append("<a>" + highlight + "</a>")
                    .appendTo(ul);


            }
        })



    </script>
}



So , this is the complete code available for Jquery Autocomplete. You can also download the source code by downloading from the attachment button. Or you can have a look at our youtube video for more details.

Comments

Tags

LinkedinLogin
LinkedinProfile
GetLinkedinProfile
C#
Aspnet
MVC
Linkedin
ITextSharp
Export to Pdf
AspNet Core
AspNet
View to Pdf in Aspnet
Model Validation In ASPNET Core MVC 60
Model Validation
Model Validation In ASPNET Core MVC
Model Validation In ASPNET
Image Compression in AspNet
Compress Image in c#
AspNet MVC
Free Download for Youtube Subscribers!

First click on Subscribe Now and then subscribe the channel and come back here.
Then Click on "Verify and Download" button for download link

Subscribe Now | 1210
Download
Support Us....!

Please Subscribe to support us

Thank you for Downloading....!

Please Subscribe to support us

Continue with Downloading
Be a Member
Join Us On Whatsapp Join Us On Facebook

Welcome To Code2night, A common place for sharing your programming knowledge,Blogs and Videos

  • Panipat
  • info@Code2night.com

Links

  • Home
  • Blogs
  • Tutorial
  • Post Blog

Popular Tags

Copyright © 2025 by Code2night. All Rights Reserved

  • Home
  • Blog
  • Login
  • SignUp
  • Contact
  • Terms & Conditions
  • Refund Policy
  • About Us
  • Privacy Policy
  • Json Beautifier
  • Guest Posts