Questions tagged [bootstrap-typeahead]
Twitter Bootstrap's autocomplete feature
648
questions
1
vote
1
answer
86
views
How to highlight some options of ngb-typeahead based on a condition?
https://ng-bootstrap.github.io/#/components/typeahead/examples#focus
In this demo, I have to make the dropdown options with value which starts with 'M' and 'N' to be permanently highlighted with green ...
0
votes
0
answers
56
views
React-Bootstrap-Typeahead: onChange does not fire when selecting the same option repeatedly
User selects option from Typeahead which returns ID of record.
ID is used to retrieve record from database.
Record updated on database and Typeahead cleared.
User selects same option from Typeahead - ...
0
votes
0
answers
146
views
Problems with ngx-bootstrap-typeahead regarding adding to a third input where two are already working great
I'm back with another bizarre issue.
I'm using Angular 13 currently.
I am using ngx-bootstrap-typeahead. It works GREAT on two fields nicely!
When I add to a third field, that's what the problems ...
0
votes
0
answers
74
views
Laravel Typeahead show suggestions with href link
I am trying to create an autosuggestion search box in Laravel using Typeahead.js. When a user starts to type, typeahead will show all the school names that match. But I also want to have a href ...
0
votes
0
answers
39
views
Bloodhound.js: transform the data returned by a remote source does not work
I am using Bloodhound with a remote API and I need to transform the result returned from the remote API.
I am using the https://photon.komoot.io/ API which returns an object with the features property ...
-1
votes
1
answer
867
views
How to use a custom template in ng-bootstrap typeahead?
Here is the ng-bootstrap typeahead code:
<div class="col">
<input
id="typeahead-config"
type="text"
class="form-control"
[(ngModel)]=&...
1
vote
0
answers
38
views
How to create a custom typeahead using angular-formly which should be generic, any suggestions?
I am new to formly, I tried creating typeahead but got stuck. Please help me out in creating typeahead.
0
votes
0
answers
232
views
500 Internal Server Error on Laravel 8 Typeahead
So, I tried to implement an autocomplete search on Laravel 8 with Typeahead and jquery, but it gives me 500 (internal server error), I wonder what is wrong with my codes?
<div class="container&...
0
votes
1
answer
303
views
Type Element[] is not assignable to type never[] in react-bootstrap-typeahead
I am trying to create a typeahead dropdown in react. Dropdown list will display a list of names.
I'm following the single selection example in npm documentation live example
This is my code block.
...
1
vote
0
answers
175
views
(bootstrap Jquery) Typeahead in multiple input field , how to find from where typeahead triggered
I have two input fields and I want to use the same typeahead code in both the input control. The only difference is that the suggestion should come below that specific control.
$('input.typeahead')....
1
vote
1
answer
37
views
Reference to this is not accessible inside traditional function [duplicate]
I am using Angular 9 for web development. I wanted to implement typeahead feature in my application. So I am using ng bootstrap typeahead. everything works perfectly as mentioned into below code.
...
1
vote
1
answer
343
views
Typeahead.js not showing suggestions
I am trying to make typeahead for the input box. I'm using typeahead.js for that. I'm using the same code to learn this functionality. Though I'm not getting any error, it is not showing suggestions. ...
1
vote
0
answers
499
views
ngx Bootstrap Typeahead show all list again after selected and focus again
I have auto selected the data from code
ts.code
this.add_resutant_form.patchValue({
select_company: this.selectedCompany.name
})
HTML
<input
[typeahead]="companyList&...
2
votes
1
answer
2k
views
Angular ngbTypeahead doesn't reset value of input on blur
I'm using the bootstrap ngbTypeahead of Angular2+ and I want to clean the input when lose focus and no item ware selected.
But the value doesn't clean when the typeahead shows options to select, ...
0
votes
2
answers
3k
views
How to clear the inputs in function using React bootstrap typeahead
I am trying the clear the inputs in the function using following code.
import {Typeahead} from 'react-bootstrap-typeahead';
type requestState={
value:string[]
}
class Data extends Component<{}...
0
votes
1
answer
549
views
Bootstrap-3-typeahead: How to change focus to another input after selected item into dropdownlist?
I'm using Bootstrap 3 Typeahead 4.0.2 and i would like to know how can i change Typeahead input focus to another input text after i select one item inside list? I found some similar questions but i ...
1
vote
0
answers
248
views
how to make Firstname selected from both Firstname and Lastname in display (Label key) Typeahead React
How to select the first name only (i.e selected should be Firstname), when both first name and last name is in display (Label key ) in type ahead react.
<Typeahead
id="typeahead"
...
0
votes
0
answers
304
views
Twitter TypeAhead: How to improve my code to display thumbnails?
I'm using Twiter-Typeahead plugin (http://twitter.github.io/typeahead.js/examples/#custom-templates) to display values into input text and i would like to improve my code to display thumbnails.
I ...
1
vote
0
answers
526
views
NgbTypeahead on multiple inputs in a component
Does anybody know how to use ngbtypeahead functionality on multiple inputs in a component? I have a simple customer form and want users to be able to search by last name when they type in last name ...
3
votes
1
answer
2k
views
ng bootstrap typeahead not working with angular reactive form
Here is my component file
import {NgbTypeahead} from '@ng-bootstrap/ng-bootstrap';
import { map, switchMap, finalize, debounceTime, distinctUntilChanged, filter } from 'rxjs/operators';
import { ...
-1
votes
1
answer
640
views
How to increase Auto complete search bar suggestion list items(currently at 8 need to increase up-to 16)
I have developed a search bar to search items from my products list where more than 10,000 products available. When a user type a word user can see suggestion list with 8 items based on user input. ...
0
votes
1
answer
30
views
Cannot be selected and deleted items do not return to the list in typeahead react-bootstrap
We put this.state.todos inoption. this.state.todos.slice (0.2) I put in selected. However, I cannot select items and the deleted item does not go back to the list. I'm using the typeahead react ...
0
votes
0
answers
941
views
Cannot delete input content in Typeahead react-bootstrap
Trying to delete the contents of the input field by pressing backspace. However, nothing can be deleted. When I delete onChange = {this.handleSelectContractor} the field can be cleared, but after ...
0
votes
1
answer
496
views
Passing a variable to `renderMenuItemChildren` in react typeahead bootstrap
From the App component it passes the variableitem to the Todo component. From the Todo component passes to theSearchResult component. However, the `SearchResult 'component is not displayed.
Demo here:...
0
votes
1
answer
2k
views
How remove an item from the Typeahead React multiselect?
In the TokenSkill component, it addsonRemove = {props.onRemove}. However, with an element in multiselect, there is no cross to delete the selected element.
Demo here: https://codesandbox.io/s/...
-2
votes
4
answers
1k
views
Calling click() on multiple elements in vanilla js and react
Example: clearButtons has two elements. Problem: clearButton.click() is calling only on the one element. And it should at all
Code here: https://stackblitz.com/edit/react-6bam4e
import {Typeahead} ...
0
votes
1
answer
1k
views
How to handle onClick event inside a conditional component
I'm trying to add the onClick event on the data I selected from the AsyncTypeahead. I'm passing the callback function to the Problem that renders only if I've selected an item. But after selecting an ...
1
vote
2
answers
2k
views
How to dynamically add typeahead in ng-bootstrap? Angular 7/8
I'm using ng-bootstrap as my front end design in Angular.
I need to use its TypeAhead component which is this TypeAhead of Ng-Bootstrap
but the thing is I am implementing a FormArray. I need to ...
1
vote
0
answers
178
views
Bootstrap ui lookahead dropdown only works after deleting selection first
The software I am debugging uses ui-bootstrap-tpls-1.1.2.
By default, if I open a modal and then click on one of the text boxes that has a a lookahead dropdown menu, the dropdown menu opens.
If I ...
0
votes
1
answer
137
views
WordPress multiple Ajax Search URLs
I'm using typeahead to enhance the search on my woocommerce website. Therefore I'd like to split products and content results for different FE-Display.
Im using the wp-admin/admin-ajax.php?action=...
0
votes
1
answer
607
views
ngbTypeahead with *ngFor directive
I have one input field inside *ngFor which will execute 4 times.
When i am clicking on one of the input field, ngbTypeahead suggestions is getting open for all four input fields.
Here is my code:
....
1
vote
0
answers
874
views
Javascript typeahead after 3 characters
I want to send a query string to back end after 3 characters, and have the results used for typeahead.
Currently the I get the data back, no error on console, but there is no suggestions in the type ...
1
vote
0
answers
291
views
Get Typeahead.js dropdown item for click event
I've been trying to get the dropdown items which typeahead.js retrieves me by their class name.
What I'm trying to do is a function which writes a message into the console when the dropdown item is ...
4
votes
0
answers
247
views
Angular buildOptimizer breaking bootstrap carousel transition effects
I'm working with Angular 7 and Bootstrap typeahead "^3.3.6" carousel (change the version is not an option.). When I include the option:
buildOptimizer in angular.json the Carousel Transition effect ...
0
votes
1
answer
99
views
In Typeahead, unable to subscribe to service to get data to bind to typeahead search
i'm using ngbootstrap typeahead (https://ng-bootstrap.github.io/#/components/typeahead/examples#http)
as per example mentioned we need to return observable to [ngbTypeahead]="search"
we're ...
0
votes
0
answers
203
views
Route on select in bootstrap typeahead
I've been working with this component here https://ng-bootstrap.github.io/#/components/typeahead/examples.
I would like to route to a new page when a result is selected (either using enter key or ...
3
votes
0
answers
197
views
How to cache search results retrieved from auto-complete API
I've been working on a searching auto-complete feature with Bootstrap-3-Typeahead ,GWT and data comes from http://dawa.aws.dk/dok/api by JsonP request..
The Typahead creation method is below
...
1
vote
0
answers
407
views
How to trigger Typeahead using Enter/press only?
I have an autocomplete search field (Bootstrap-3-Typeahead), which currently is triggered whenever I use the up/down arrow keys.
I'm not sure why, but this is my code:
$(function() {
$("input[data-...
0
votes
1
answer
148
views
Twitter Typeahead custom select logic
I'm using Twitter Typeahead to generate suggestions. My Ajax request is returning a complex data type, which is displayed nicely in the suggestions section. When the user selects one suggestion, I'd ...
0
votes
1
answer
181
views
angular with bootstrap typeahead
I have been trying to make my Typeahead work:
<div *ngFor="let item of items; index as i">
<input type="text" name="name{{i}}" [(ngModel)]="item.name" [ngbTypeahead]="searchItem" />
&...
3
votes
1
answer
626
views
How to deal with Observables in rxjs and angular 5 , problem with bootstrap typeahead implementation
I'm trying to implement autocomplete (bootstrap typeahead) in angular 5.
After a few code refactoring, I got this as my best result so far. but after emit new value (type new term in input) it made ...
1
vote
1
answer
260
views
Form management with Springboot - autofill a form when user select a typeahead
I have a spring-boot, MVC, web application form.
The user can type and object name in a field. This field got a bootstrap typeahead dynamique list of already existing objects.
I'd like to autofill my ...
0
votes
0
answers
109
views
Free Input not working on bootstrap typeahead
Please review below code
var elt = $('input');
elt.tagsinput({
itemValue: 'value',
itemText: 'text',
freeInput: true,
typeaheadjs: {
name: 'cities',
displayKey: 'text',
source:...
0
votes
1
answer
189
views
get JSON file on input change only once
I have a JSON file on my backend with suggested words for autocomplete in the search.
I don`t want the JSON to load every time the page loads (for performance), I want only when someone wants to use ...
0
votes
1
answer
900
views
AngularJs ui-bootstrap Typeahead with scroll
I have created an typeahead on my input using angularjs ui-bootstrap. Code as below:
<div id="scrollable-dropdown-menu">
<input type="text" name="uName" ng-model="uName" ...
3
votes
0
answers
2k
views
Bootstrap tagsinput and typeahead with ajax
I am using Bootstrap tagsinput and typeahead, which works perfectly when I use it this way:
$(document).ready(function() {
$('.tagsinput-typeahead').tagsinput({
typeahead: {
...
0
votes
1
answer
188
views
uib-typeahead dropdown doesn't disappear when focus shifts?
I've got a dropdown in this spreadsheet-like UI which provides a list of names as possible valid entries for the cell. When I tab or return out of the cell, it disappears as it should, but when I ...
3
votes
5
answers
2k
views
Bootstrap Typeahead working on only two clicks in my scenario and Need to make work on dynamically for 20 rows
Here are code examples of my actual scenario. I need to call typeahead only when clicking once on the show button. JSFiddle
Down below is my HTML table.
<table border="1" cellpadding="5" ...
1
vote
0
answers
47
views
Use typeahead bootstrap with Elasticsearch
I'm trying to implement this with elasticsearch and it is working But how i can force to typeahead class show results which can be different from the searched terms?
For example i search ardino, The ...
0
votes
0
answers
2k
views
how to scroll using Up & Down arrow keys in Bootstrap NgbTypeahead
I am using Bootstrap NgbTypeahead.(https://ng-bootstrap.github.io/#/components/typeahead/examples)
Using key arrows, I can navigate to next item and I added a scroll to that list using css.
....