• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

290
Views
How to add "1+More" tag button in jquery autocomplete?

I have added jquery autocomplete in my website search box for the locations. I am able to achieve multiple autocomplete search suggestions in the box but it looks not user friendly as all the suggestions are displayed with the box. I want 1 or 2 suggestions and rest all will be under the tag button called: "1+ More". I have attached the desired output and what I have right now.

Javascript code used:

<script type="text/javascript">
    $(function(){
        $.getJSON("<?php echo base_url();?>package.json", function(data) {
        
        autoComplete = [];
        for (var i = 0, len = data.length; i < len; i++) {
            autoComplete.push(data[i]);
        }
        $('#myAutocompleteMultiple').autocomplete({
            source: autoComplete,
            multiselect: true,
            
        });
    });
</script>

and html used:

<input id="myAutocompleteMultiple" type="text" placeholder="Search Location"/>

Json file content:

[
    "Al Barari Commercial",
    "Al Quoz Commercial",
    "Al Qusais Commercial",
    "Arjan Commercial",
    "Bur Dubai Commercial"
]

Please anyone help me.

desired output

current output

Thank you.

about 3 years ago · Santiago Gelvez
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error