How can I efficiently make a dropdown menu with search functionality instead of using datalist?

Question

How can I efficiently make a dropdown menu with search functionality instead of using datalist?

I am currently working on creating a custom searchable input field that makes backend calls. Instead of using datalist, I want to design a unique UI with ul and li items. While I have successfully implemented the search functionality, I am facing a glitch with the UI. I am trying to display the ul when the input is focused, but when I attempt to hide the ul on blur of the input, the ul disappears before I can select an item. What would be the correct CSS approach for this scenario?

<input placeholder (blur)=“focussed=false” (focus)=“focussed=true” (keyup)=“filterData($event.target.value) ”/>
<ul *ngIf=“focussed”>
<li *ngFor=“item of filteredItems” >{{item}}</li>
</ul>

javascript html css angular

Answer 1

Answer №1

To improve item selection, consider using the (mousedown) event instead of (click). The mousedown event takes precedence over blur, ensuring it is fired first.

If you have a selection handler for list items, replace your li tag with the following code:

<li *ngFor="let item of filteredItems" (mousedown)="handleItemClick(item)">
     {{item}}
</li>

Within the handleItemClick method, you can set focussed to false to close the list only after an item is selected.

handleItemClick(item){
   // your code
   this.focussed = false; // close the list
}

Answer 2

To improve item selection, consider using the (mousedown) event instead of (click). The mousedown event takes precedence over blur, ensuring it is fired first.

If you have a selection handler for list items, replace your li tag with the following code:

<li *ngFor="let item of filteredItems" (mousedown)="handleItemClick(item)">
     {{item}}
</li>

Within the handleItemClick method, you can set focussed to false to close the list only after an item is selected.

handleItemClick(item){
   // your code
   this.focussed = false; // close the list
}

How can I efficiently make a dropdown menu with search functionality instead of using datalist?

Answer №1

Similar questions

Words not within the span, away from the span border

The jQuery method .on gathers and retains click events

Troubleshooting Flexbox in Internet Explorer 11: Issue with 100% width not functioning properly within nested flex containers with a 'column'

Popper.js failing to initialize during page load

Angular - Ensuring the Independence of Field Pairs During Validation

How to Extract Specific Data from JSON Response using Jquery?

Can I incorporate NodeJS modules such as "oauth" into my Firefox extension?

When the browser's back button is clicked, no action occurs with Next/router

Guide on exporting member formModule in angular

Checking for at least one matching pair in a JavaScript object

Issue with ScrollBar functionality in IE

Using Typescript with Protractor for Dropdown Menus

Utilizing NgClass Within an Attribute Directive in Angular 2.4.0

Enhancing User Experience by Applying Hint Text to Multiple Input Fields using jQuery

Tips for checking dropzone functionality during development

Can we display an express view in response to a WebSocket event?

Tips for preventing control click events from interfering with modal dialog interactions

Can Node.js version 11 support node-sass in Angular projects?

How to retrieve an element using a dynamically generated class name in Vue.js

Steps to implement a text border in Raphael.js