AngularJS: How to Implement Multi-select Functionality with Bootstrap Typeahead

I'm currently implementing bootstrap multiselect in my angular project (Bootstrap 2.3)

My goal is to achieve a similar functionality using bootstrap typeahead, allowing users to select multiple values from search results.

I've tried using the highlighter function of bootstrap typeahed to incorporate checkboxes into the results. I found inspiration from this plnkr http://plnkr.co/edit/szO2An1oslDyGftnshyR?p=preview, but I'm still struggling to get my code to work.

Original Code for multiselect:

  1. To check previously selected values

    $scope.selectOptions = function () {
var index = fetching the index of checked values;
var selectedAttrFound = index>-1;
if (selectedAttrFound == true) {
angular.element("#attr-value-selector")
.multiselect('select', $scope.filterAttributes[index].attributeValues);
}
};

  2. To populate the multiselect

    $scope.attrValuesWidget = angular.element("#attr-value-selector")
.multiselect({
 numberDisplayed: 2,
 enableFiltering: true,
 maxHeight: "300",
 onChange: function (element, checked) {
 $scope.attributeActionValue = {
 attribute: $scope.attributeSelected,
 value: element.val(),
 checked: checked
 };
 $scope.$apply();
 }
 })
 .multiselect('dataprovider', $scope.configAttributeValuesList);

  3. The Select box

    <select id='attr-value-selector' multiple='multiple' ></select>
javascriptangularjstwitter-bootstrapbootstrap-typeaheadbootstrap-multiselect

Answer №1

While it is possible to easily include checkboxes in your highlighter function.. 

highlighter: function( item ){
    var bond = bondObjs[ item ];              
    return '<div class="bond">'
            +'<input type="checkbox" class="mightBeRequiredToCollectTheSelectedResult">' 
            +'<img src="' + bond.photo + '" />'
            +'<br/><strong>' + bond.name + '</strong>'
            +'</div>';
}

The challenges are;

  • typehead.js automatically closes its result after you click one of the search result. You need to override this first.
  • Then you also need to list the selected values into the textfield.

If you check typehead.js github issues page, issue #254 mentioned that they don't have plan to support multi select, at least for now.

Now I might get downvoted for this, but If I were you I'll consider other alternatives as well.

Hope it helps. Cheers.

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

Attempting to conceal the select input and footer components of the Calendar component within a React application

I am currently working on customizing a DatePicker component in Antd and my goal is to display only the calendar body. Initially, I attempted to use styled components to specifically target the header and footer of the calendar and apply display: none; st ...

javascriptreactjsstyled-componentsantd

How can I permanently disable a Bootstrap button on the server side using PHP after it has been clicked once?

I am in search of a way to disable a bootstrap button permanently after it has been clicked once. While I am aware of how to achieve this on the client side using JavaScript, the button becomes enabled again after the page is refreshed. I am now looking ...

javascriptphphtmlbootstrap-4

Displaying collapsible elements in the navbar changes the overall aesthetic of the navbar design

I am attempting to design a navbar that includes collapsible items, a logo, and a button that remains visible at all times. My intention is to have the collapsible items trigger button on the left, before the logo, and the always visible button on the righ ...

twitter-bootstrapbootstrap-4

Combining Multiple Arrays into a Multidimensional Array

I'm struggling to find information on how to combine multiple arrays of the same length into a multidimensional array. For example, I have three arrays: array1 = [value1a1, value2a1, value3a1]; array2 = [value1a2, value2a2, value3a2]; array3 = [value ...

javascriptarraysmultidimensional-array

Updating variable storage in React components

This is a project built with Next.js and React. Below is the folder structure: components > Navbar.js pages > index.js (/ route)(includes Navbar) > submitCollection.js (/submitCollection)(includes Navbar) The goal is to allow users to inpu ...

javascriptreactjsreact-routernext.jsuse-state

Having issues with setting up nodejs on kali linux

Whenever I try to execute the configure script ./configure for nodejs installation, it fails to run successfully. Traceback (most recent call last): File "./configure", line 19, in <module> from distutils.spawn import find_executable ModuleN ...

javascriptnode.js

ng-disabled directive not functioning as expected

Trying to develop a customized button directive, I aim to utilize the ng-disabled attribute and link it to a variable within the scope. Check out the HTML snippet below: <div ng-controller="MyCtrl"> <btn dis="disableBtn"></btn> </d ...

javascripthtmlangularjs

What steps are involved in importing remark-gfm into next.config.js?

I am interested in incorporating MDX into next.js with the remark-gfm plugin. After discovering the Next.js Docs on MDX, I decided to follow their guidelines and added an import statement. // next.config.js import remarkGfm from 'remark-gfm;' co ...

javascriptnext.jsmdxjsremarkjs

Normalization of Firebase Database

Recently, I developed a Tricycle Patrol app designed to address the prevalent issue of reckless tricycle drivers in our city. Users can log in and submit reports through a form that includes fields such as: - created_at - description - lat - lng - plateNu ...

javascriptjsonfirebasefirebase-realtime-database

Is there a way to embed HTML code within a JavaScript variable?

Embedding HTML code within Java Flow can be quite interesting For instance: Check out this JSFiddle link And here's how you can incorporate it into your script: widget.value += ""; Generating a Pro Roseic Facebook POP-UP Box through Widg ...

javascripthtml

How can I make multiple elements change color when hovering with CSS?

Hey there! I have a little design challenge that I need help with. On my website (), I am trying to make multiple elements of a specific item change color when the user hovers over the text. If you hover over the "more" menu item, you'll notice that o ...

javascriptjqueryhtmlcsshover

Searching for data in Node.js using Mongoose and dates

I'm in search of a way to execute a specific query with mongoose. In my mongodb database, I have data structured like this: "startDateTime" : ISODate("2017-03-22T00:00:00.000Z"), "endDateTime" : ISODate("2017-03-27T00:00:00.000Z"), My goal is to r ...

javascriptnode.jsmongoose

Webpage push notifications are a convenient feature that allows websites to

Is it possible to incorporate web notifications on websites built using JSPs with jQuery, Vue, and Angular.js on the front end? Is there a method to integrate web notifications within this specific environment? ...

angularjsjspwebpush-notificationvue.js

Combining Multiple Optional Async AJAX Calls

In my Angular 1.5.8 app, I have different views that require various combinations of the same 3 ajax requests. Some views need data from all three endpoints, while others only need data from one or two. To efficiently manage the retrieval of this data, I ...

javascriptangularjsasynchronouspromiseq

Troubleshooting IE Freezing Issue Due to JavaScript Code with .addClass and .removeClass

Need some help troubleshooting why my code is causing IE to crash. After commenting out sections, I discovered that the issue arises when using .addClass and/or .removeClass inside the if conditions: if ( percentExpenses > 50 && percentExpenses ...

javascriptjqueryinternet-explorer

Tips for accessing a value in a multidimensional json array without the key in JavaScript/jQuery?

I'm working with a JSON file that contains a multidimensional array. The array consists of city data at the first level and temperature data at the second level. I'm facing difficulties in dynamically extracting values from the second level. I a ...

javascriptjqueryarraysjson

There are three pop-up windows displayed on the screen. When each one is clicked, they open as intended, but the information inside does not

Every button triggers a unique modal window Encountering an unusual problem with Bootstrap 5 modal functionality. Within a webpage displaying a list of database entries (refer to the screenshot), each entry features three buttons to open corresponding mod ...

javascriptbootstrap-modalbootstrap-5

Mongoose: Unable to fetch item using its specific identification - Error 404

I've been attempting to fetch objects from MongoDB using Mongoose, but I keep encountering a 404 error. router.get('/blogs/:id', function(req, res){ console.log('trying to get one blog post by id'); Blog.findOne({ _id: req.para ...

javascriptmongodbexpressmongooseserver

Generating Legible JavaScript Code from TypeScript

I am looking to maintain the readability of my compiled JS code, similar to how I originally wrote it, in order to make debugging easier. However, the typescript compiler introduces several changes that I would like to disable. For instance: During compi ...

javascripttypescriptformatting

Leveraging React to efficiently connect with friends on Firebase Realtime Database, enhancing the capability to include multiple connections

Currently, I am working on a project that involves React and Firebase's real-time database to create a friend network feature. The main challenge I'm facing is when a user enters an email into an input field. Upon submission, the system takes a s ...

javascriptreactjsfirebasefirebase-realtime-database