No results found using AngularJS UI-Bootstrap Typeahead

I've been searching around but haven't found any questions related to this topic.

Currently, I am utilizing Angular UI-bootstrap typeahead feature.

Here is what I have implemented:

<input type="text" ng-model="loc" typeahead="location for location in filteredLocations = (locations | filter:$viewValue)" class="form-control" placeholder="Location" />

While typing, the options appear in the typeahead-popup. However, how can I display a message like "No matches found" in that same popup when there are no matches?

Thank you in advance

javascriptangularjstwitter-bootstraptypeahead

Answer №1

To customize your search results display, you can create a unique template using the 

typeahead-template-url="customTemplate.html"
attribute along with the following code snippet:

<script type="text/ng-template" id="customTemplate.html">
  <a>
      <img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16">
      <span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
  </a>
</script>

If no search results are found, you can include a specific element to indicate this outcome. By utilizing an ng-if statement within the ng-template, you can distinguish the no-results element and prevent it from being clickable, ensuring that users cannot select "no results".

Answer №2

On the UI Bootstrap webpage, they showcase a directive called typeahead-no-results="noResults". This is followed by <div ng-show="noResults">, containing a glyphicon and displaying the message "No Results Found". The complete code snippet looks like this:

<h4>Asynchronous results</h4>
<pre>Model: {{asyncSelected | json}}</pre>
<input type="text" ng-model="asyncSelected" placeholder="Locations loaded via $http" uib-typeahead="address for address in getLocation($viewValue)" typeahead-loading="loadingLocations" typeahead-no-results="noResults" class="form-control">
<i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
<div ng-show="noResults">
  <i class="glyphicon glyphicon-remove"></i> No Results Found
</div>

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

What are some effective ways to utilize localstorage efficiently?

I've been working on creating a variable that stores its value across multiple pages using local storage. However, I've encountered an issue where the variable is not being saved, and there are no error messages to help diagnose the problem. Her ...

javascripthtmlcssweb

Maintain the same javascript variable throughout multiple pages

I am working on a project that involves utilizing a database along with 2 drop down menus. Through the use of JavaScript, I am able to capture the value selected from the drop down menus and then pass it on to my PHP script. The PHP script retrieves releva ...

javascriptphphtmlmysql

"Customizing the topbar of Twitter Bootstrap for right-to

Attempting to implement twitter bootstrap for a top navigation bar on my master page. http://jsfiddle.net/ZqCah/1/ Encountering some issues and seeking assistance: 1- Desiring to switch the direction of all content to right-to-left (rtl). This would me ...

htmlcsstwitter-bootstrap

Begin anew with Flip.js

Currently, I am incorporating the jquery flip plugin from nnattawat.github.io/flip to establish a card flipping mechanism on my website. I have successfully implemented the method outlined in the documentation to unregister the flip event from the elemen ...

javascriptjqueryhtmljquery-plugins

Combining the jquery-UI slider functionality with the canvas rotate() method

Is there a way to rotate an image using html2canvas plugin and jQuery UI slider? I am new to programming and need some guidance on how to achieve this feature. Here is my current progress: http://jsfiddle.net/davadi/3d3wbpt7/3/ ` $("#slider").slider({ ...

javascriptcssjquery-uihtml2canvas

What could be the reason behind Next.js attempting to import a non-existent stylesheet?

Lately, I've come across an issue where Nextjs is attempting to import a non-existent stylesheet (refer to the images below). I'm looking for guidance on how to resolve this error. Hoping to find a solution here, thank you Web browser console W ...

javascriptreactjstypescriptnext.js

Defeat the all-powerful !important tag and enable dialog customization for positioning

I am currently developing a browser extension and I am encountering an issue with using JQueryUI to display a modal dialog. The problem arises when certain websites, for example espn.com, also utilize JQueryUI but do not properly scope their own elements. ...

javascriptjquerycssjquery-ui

Unable to view videos shared by users in PeerJS and WebRTC video chat application from different tabs

Recently, I embarked on the task of creating a Video chat Website using Peer Js. Initially, everything seemed to be working fine as I was able to see my own video stream. However, a problem arose when attempting to view the video stream from another tab or ...

javascriptnode.jsexpresssocket.iopeerjs

Vue Router generates a URL containing %2F when dealing with slug routes

I am facing an issue in my Vue 3 application where I need to create a route for dynamic slugs. Currently, when using RouterLink, the generated URL contains %2F instead of actual slashes which is not the desired result. For example, the current URL looks l ...

javascriptvue.jsvue-router

Encountering issues when trying to access a property after setting an EJS variable in

Whenever this code runs, an interesting type error occurs within the if statement. It says: Cannot read property product.thumbgallery1 of undefined. var urlArray= []; var product = '<%- product %>'; console.dir(product); ...

javascriptjsonexpressejs

Building a hierarchical tree structure using arrays and objects with Lodash Js

I am attempting to create a tree-like structure using Lodash for arrays and objects. I have two arrays, one for categories and the other for products, both with a common key. The goal is to organize them into a tree structure using string indexing. let ca ...

javascriptnode.jsreactjstypescriptlodash

Can you explain the variance between the two state updates in React?

Currently enrolled in a React course where the instructor is diving into state updates. I'm struggling to grasp the internal differences between these two code snippets, provided below for reference: Snippet that updates state directly class Counter ...

javascriptreactjs

Utilizing auto-generated Nonce for Content Security Policy in a Node.js/Express web application

I've exhausted all possible solutions in my attempt to create a nonce and pass it successfully to the CSP and inline scripts with the nonce variable. Despite reading numerous articles, the guidance on accomplishing this task remains vague. Fortunately ...

javascriptnode.jsexpresscontent-security-policy

Deactivating a form field depending on a selected radio button in Angular 2

If I have two radio buttons, with a click function called localClick for the first button to give value 1 and the second button to give value 2. <div class="ui-g-12"><p-radioButton name="group1" value="Local" (click)=localClick(1) label="Local"&g ...

javascripthtmlangulartypescriptangular2-template

How can I combine multiple textures from mtlLoader and objLoader in three.js?

I have the files .mtl, .obj, and several .jpg textures. I have been attempting to use different textures in the export loader OBJ, and while I can see my object on the scene, it appears as a black color. Can anyone spot what might be incorrect or missing ...

javascriptthree.jsobjloader

Incorporating JSON data seamlessly into a visually appealing Highcharts pie chart

It seems like I'm facing a minor issue here. Everything was working fine until... $(document).ready(function() { // Original data var data = [{ "name": "Tokyo", "y": 3.0 }, { "name": "NewYork", "y": 2.0 }, { "name": "Berlin", ...

javascriptjqueryjsonhighchartsgetjson

Exploring the contrast of utilizing the `new Date()` function compared to Firestore's `new

I am developing a new app and need to calculate the time elapsed between the start and end of a run. When the run starts, I record a timestamp using the new Date() function in Firebase. (I opted for this over firestore fieldValue to avoid conflicts with o ...

javascriptfirebasevue.jsgoogle-cloud-firestore

"Creating a custom input tag in Rails that triggers an event when the value is changed

Is there a more efficient way to trigger events when the value of an input tag changes (i.e., whenever a character is entered or deleted) and display these values in the controller without relying on ajax? Currently, my approach involves implementing a Ja ...

javascriptruby-on-railsajaxdom-events

Utilizing SVG within Sproutcore allows for seamless access to DOM nodes and the ability to effortlessly bind Sproutcore events directly to the DOM

Exploring Sproutcore, I am delving into the world of SVG (Standard Vector Graphics) integration within the app. The goal is to utilize a canvas for drawing elements like lines, boxes, and images, all of which SVG offers. My approach involved incorporating ...

javascriptjquerysvgsproutcoresproutcore-views

What is the method for flipping a JSON object?

I recently came across a function that passes JSON in its parameter... { "code":0, "payload":[ { "time":1349661897, "packages":[ "49381" ], "ign":"PurpleArrow", "price":"15.99", ...

phpjavascriptjqueryjson