honatas / bootstrap-4-autocomplete

A simple autocomplete/typeahead for Bootstrap 4 and jQuery

Jonatas de Moraes Junior

Well, 👋 hi there! My name is Jonatas and I'm a Fullstack Software Engineer from Brazil. Welcome to my Github page!

I'll present here some software I've come up with, and what has motivated me to code them. I hope you can find something useful here! These are organized by field, so feel free to browse which section most interest you.

Front end

Multi Select Webcomponent
A Webcomponent that allows you to make multiple selections while having almost the same complexity as adding a <select> tag to your html.

A WebComponent journey
An article where I go through all the development and thought process of Multi Select Webcomponent.

Bootstrap 4 Autocomplete
A bit older, but if you are still using Bootstrap 4 and JQuery, maybe this autocomplete plugin can fit your needs.

Frameworkless JAMStack
A PoC (Proof of Concept) that showcases how one can get a modern web development enviroment without resorting to feature-bloated frameworks.

Why VDOM vs. DOM comparison is biased and unfair
A bit of reasoning on why you may not need a Virtual DOM Framework for every project.

Back end

Field Validator
A Java validation tool that leverages Java's lambda functions allowing you to create your set of validators and execute them over arbitrary data.

Redis-session
A PoC showing its possible to control user sessions without resorting to JWTs, made with Typescript and NestJS.

A different approach to User Sessions in Microservices using Redis
An article presenting an alternative to using JWTs for user session control in a microservices environment.

Factory Pattern with Polymorphism on Spring
Implementation of GoF's Factory Pattern using Spring dependency injection.

Is Hibernate Really Worth It?
An article where I discuss the downsides of using ORMs and present an alternative to it. WARNING: this is a bit outdated and I may have changed my mind about one thing or two, but if you feel like listening to old me ranting, go ahead and have a good time.

Devops

Ansible Role - OpenJDK
An Ansible role that installs any version of OpenJDK from Matthias Klose's openjdk-r PPA repository.

Ansible Role - PostgreSQL
An Ansible role that installs PostgreSQL with remote access enabled, suitable for development environments.

Ansible Role - Tomcat
An Ansible role that installs Apache Tomcat with the Manager GUI enabled, suitable for development environments.

bootstrap-4-autocomplete's Issues

Typographical Error: `treshold` should be `threshold`

The option treshold should be spelled threshold

List not being hidden after selection

Thanks for this component, it's really good. I have a weird issue - the autocomplete list appears ok, and when I select an item the text field is updated. The list itself is not disappearing though. Console isn't showing any errors, not sure how to debug?

Do not show dropdown on 'readonly' fields.

Input elements can be marked with the readonly attribute. This allows the element's data to be included with form submission, but does not allow for editing.

External file with content

Hello!

Your autocomplete is awesome and works great!

But I have an issue that I can't handle. I want to load the data from external file somewhere on my server. Can you give me the advice how to do that?

Thank you!

Reposition list when items are shown above input field

When there is not enough place below the input field, the list with the suggestions is correctly placed above the input field. While typing, the list shrinks, but the top left position keeps its place, so there is a growing gap between the list and the input field.

This can be easily overcome by calling update after the open command on line 104.

this.off('keyup.autocomplete').keyup('keyup.autocomplete', function () {
    if (createItems(_field, opts) > 0) {
        _field.dropdown('show');
        _field.dropdown('update'); // <--- This updates the position of the list
    }

Change the format source?

Hi, I need to use your component for my final project, but the source has to be an array. Could this be possible? I was trying for hours but I don't get it. Thanks.

Demos

Live demos will help attract more people

Handling values not found in source array

For my usecase input, that's being typed in and is not found in source array, should be offered in suggestions too (in most cases it will be just single option after complete name of city is typed in), then after picking it, it should be handled by separate callback. That would be ideal solution.

In my case, I have limited ammount of available cities. If the typed in city is not in the list, it falls into separate shipping zone. I need to handle that, so I will have to make a workaround for this. It would be great if this situation was handled directly by your component.

It would be helpful to have an index parameter

If the user of the plugin creates multiple instances of an input text box with autocomplete, there appears to be no way to tell the callback which instance on which to take action. In my use, I will have an unconstrained number of input text boxes with autocomplete, created as Instances of a Class. Each Instance has a unique index number associated with the enclosing div.

Solution: I'm going to send a pull request to do the following:

I suggest adding an additional option to identify the ID of the parent of the text box. I added in opts.onSelectItem one line, parentIDIndex: opts.parentIDIndex.

Armed with this, I can iterate through my Array for my search box IDs:

for (i=1; i < Array.length; i++){
  $(`#${Array[i].searchBoxID}`).autocomplete({
    source: tzNamesObject,
    onSelectItem: onSelectItem,
    highlightTyped: false,
    threshold: 3,
    parentIDIndex: i  
  });
};

And then in the onSelectItem callback I can set values unique to each ID:

function onSelectItem(item){
  Array[item.parentIDIndex].location = `${item.value}`;  
}

threshold not treshold

It’s threshold not treshold. ☺️

How to make AJAX URL working with autocomplete

Hello @Honatas

One more issue I'm facing ATM and would appreciate your help. I tried every way you mentioned at https://bootstrap-autocomplete.readthedocs.io/en/latest/ regarding how to make AJAX URL working with autocomplete but somehow that isn't helping. Can you please check and provide me some guidance about how to make it working. I've made a JSFiddle as well - https://jsfiddle.net/ae0o5fzy/.

Below is code I'm trying with:

$(this).autocomplete({
                resolverSettings: {
                    url: 'http://api.dev.phoenix.com/v1/en/users/autocomplete/email'
                },
                treshold: 2,
                onSelectItem: function(item, element) {
                    let input = $(element).data('value-input');
                    $('#'+input).val(item.value);
                }
            });

Please guide.

Many thanks,
Hiren

Why is value set to label and not to value?

The default source is {'label': 'value'} and my expectation was that I can have a more descriptive label and that the value is inserted as the value. However, the label is inserted by default, which is counter intuitive (at least to me). Any particular reason why this is the case?

Show autocomplete list at typed order

How can I show autocomplete list just for typed characters in order?

If I have,
src = ["name":"foo", "name":"boo", "name":"off", "name":"ok"]
treshold: 1
and I typed: "O"

output is: foo, boo, off, ok

I needed output just: off, ok

Use with JSON Array?

I am trying to find a way to use this with JSON arrays containing objects. The docs say you can use any format you want as long as you specify the value and labels, but does not go into any detail on how to do so. Could you elaborate on this?

Multi word search

One thing it seems no one has and that is also with jquery autocomplete is multi word search. Say in your example, if I do bo au ex, it would find anything matching all those words. It is a nice way to whittle down a list matching multiple things. I made updates to your JS to do this. Feel free to implement them to your core if you like.

attached is the updated file.
ac.zip

Three extra options

Hello.

This component is really easy to use and expand, well... In my repo i have expanded version of this component.
I add three configurable options. Maybe you like it 👍

The first is the ability to add a class to the dropdown-menu item created by the component. This enables the creation of e.g. a scrolling drop-down list.
Option: class
Default: (empty string)

The second option is to allow a string comparison from the beginning. Uses the startsWith method to compare, not indexOf :) Simple, but very useful.
Option: startWith
Default: false

The third option is a fetchSource callback function to get autocomplete data.
In my fork, I have included a broader description and an example of use (is a bit stupid: P but shows, how to use it)
Option: fetchSource

I also added the ability to display all possible matching answers by setting the maximumItems value to 0 (zero). Useful when we use the class setting for dropdown-menu, e.g .:
CSS

.autocomplete {
  height:200px;
  overflow-y:auto;
}

JS

    $('#input').autocomplete({
        source: src,
        highlightClass: 'text-danger',
        treshold: 1,
        maximumItems: 0,
        class: 'autocomplete'
    });

Keyboard Arrows Throwing Console Errors When Pressed

Hi,
I am using this library with Bootstrap v5.1.3 and have noticed errors in the console when pressing the arrow keys to access the dropdown menu generated by autocomplete.

Uncaught TypeError: Cannot read properties of undefined (reading 'nextElementSibling')
at Object.next (selector-engine.js:63:24)
at hi._getMenuElement (dropdown.js:270:27)
at new hi (dropdown.js:103:23)
at hi.getOrCreateInstance (base-component.js:55:41)
at HTMLDivElement.dataApiKeydownHandler (dropdown.js:453:31)
at HTMLDocument.n (event-handler.js:119:21)
next @ selector-engine.js:63
_getMenuElement @ dropdown.js:270
hi @ dropdown.js:103
getOrCreateInstance @ base-component.js:55
dataApiKeydownHandler @ dropdown.js:453
n @ event-handler.js:119

However, the tab key works fine.
Tested on Chrome 110.0.5481.178 and Firefox 111.0.1 on Windows 10

How do I refresh the values list without refreshing all the control ?

External source data

How can I get data written in autocomplete and make source data from an external file?

$('#myAutocomplete').on('input keyup', function() {
    var query = $(this).val();
    if (query.length > 2)
    {
        $.ajax({
            url:"/search.php",
            data: query,            
            dataType:"json",
            cache: false,
            processData:false,
            type:"POST",
            success: function (data) {
                $('#myAutocomplete').autocomplete({
                    source: data,
                    maximumItems: 10,
                    treshold: 2      
                });
               }
        });
    }   

});

source from database in json format

Hi,

I'm struggling with the source option of your autocomplete, I hope you can help me solve the problem
When I provide the source from the example

{
"Bootstrap 4 Autocomplete example": 1,
"Best example in the world": 2,
"Bootstrap 4 Autocomplete is very nice": 3,
"It contains neatly arranged example items": 4,
"With many autocomplete values": 5,
"And it uses default Bootstrap 4 components": 6,
"You can use this example to test": 7,
}

the autocomplete works.

However, when the source is a url
$(function() {$("#table_name").autocomplete({source: "{{=URL('jsonsource', 'name_autocomplete')}}"});});
returning options in the following format:

0: "Bootstrap 4 Autocomplete example"
1: "Best example in the world"
2: "Bootstrap 4 Autocomplete is very nice"

the autocomplete no longer work. I guess I have to set the label and value options, but I have not been able to figure out how.

Thanks in advance for your help.

Annet

How to get current element in onSelectItem callback function

Hello @Honatas ,

Can you please help with this and guide how to get current element where any autocomplete option is chosen. Have googled a lot and tried on my own but somehow I'm not able to figure that out. Below is the code:

$('input[type="text"].autocomplete').autocomplete({
            source: src,
            treshold: 2,
            onSelectItem: function(item) {
                console.log(item.value);
                console.log($(this));
                console.log($(this).find('input'));
                console.log(this);
            }
        });

The idea is that there can be more than one autocomplete control in a page and we need to get current control in onSelectItem callback function.

Thanks.

remote data

Hi is there any issue using data from an ajax request? I am not having success.

How to use the autocomplete in a form context?

I was wondering how to use your autocomplete field in a form context. Means: How to get the selected value of the autocomplate field when calling .serializeArray() of the form element and how to set the value when patching the form with stored values.
Thanks!

Option to fetch source by ajax request

Looking for the following functionality:

1. User types text
2. Fetch request to server for autocomplete items
3. User types more text
4. Another fetch request for updated items