AngularJS UI Select with StartsWith Searching Feature

I'm currently working on an AngularJS application where I have implemented UI Select. Below is the HTML code snippet:

<ui-select name="service" multiple ng-model="service.ServiceName" close-on-select="false" >
                <ui-select-match placeholder="Select Services...">{{$item.ServiceName}}</ui-select-match>
                <ui-select-choices repeat="service in Services | filter: {ServiceName: $select.search} | filter:myFilter track by service.ServiceId">
                      {{service.ServiceName}}
                </ui-select-choices>

While the select filter provides a contains search functionality, I am looking to filter elements based on the criteria of starts with. I have come across several examples of a startswith filter, but I am struggling to integrate them into UI Select.

javascriptangularjs

Answer №1

One item only : Sample Link.

JavaScript

function checkMatch(actual, expected) {
    var lowerStr = (actual + "").toLowerCase();
    return lowerStr.indexOf(expected.toLowerCase()) === 0;
  }

HTML

<div repeat="item in items|filter:$search:checkMatch">
      <span ng-bind-html="item.name | highlight: $search"></span>
      <small ng-bind-html="item.description | highlight: $search"></small>
    </div>

Multiple Items : Sample Link

JavaScript remains the same as above.

HTML

<div multiple ng-model="demo.colors" theme="bootstrap" ng-disabled="disabled" close-on-select="false" style="width: 300px;" title="Choose a color">
    <div placeholder="Select colors...">{{$item}}</div>
    <div repeat="color in availableColors | filter:$search : checkMatch">
      {{color}}
    </div>
  </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

Retrieve data within an object.map() function, returning after the mapping process has been completed

I am currently working with a cardsList object that is retrieved from a fetch() function. As I iterate over the cardsList and make additional requests to get more information for each card, I have encountered a peculiar issue. Despite the mapping process b ...

javascriptreact-native

Using Protractor to extract text from multiple paragraphs

How do I retrieve the values of all paragraphs (p) at once? Below is an example of how my inspect view appears: "Testing sample one." "Testing sample two." And here is a snippet of my code to extract the value of id 'run': browser.findElement ...

javascriptseleniumprotractor

Transmitting arrays containing alphanumeric indexed names via ajax requests

I am facing a challenge in passing an array through a jQuery Ajax call. My requirement is to assign descriptive indexes to the array elements, for example, item["sku"] = 'abc'. When I create the following array: item[1] = "abc"; ...

javascriptjqueryajaxarraysmultidimensional-array

When implementing protractor spyOn() with jQuery's ajax() function, an error is triggered stating 'ajax() method is non-existent'

I am currently testing the functionality of using AJAX to submit a form. Below is the Protractor code for the test: describe('login.php', function() { it("should use ajax on submit", function() { browser.get('/login.php'); spyOn($ ...

javascriptjqueryjasmineprotractor

Loading jsp content into a div dynamically within the same jsp file upon clicking a link

Currently, I am working on creating a user account page. On this page, my goal is to display related JSP pages in a div on the right side when clicking links like 'search user' or 'prepare notes' on the left side. In my initial attempt ...

javascriptjqueryhtmljspiframe

Exploring the syntax for navigating with JS Angular and HTML, such as when using the code snippet: ng-click="save(userForm)"

I am struggling to grasp the functionality of a specific part of this code. Despite my efforts to find tutorials, I have been unable to locate relevant information. There are two lines in particular that puzzle me: <button type="submit" class="btn btn ...

javascripthtmlangularjs

Timed up 10-second countdown with vue.js

<html> <head> <meta charset="utf-8" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" ></script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> < ...

javascriptvue.js

I'm curious if there is a method to incorporate an array within a where: $or statement using sequelize?

I have an array of team IDs called teamsIdsSelected = ['1', '5', .., 'X'] In order to retrieve all the challenges associated with each team ID from the 'Challenge' table, I attempted the following: Utilizing this f ...

javascriptmysqlnode.jsexpresssequelize.js

Having trouble getting AngularJS ngCloak to function properly?

My post category page is supposed to display a message if there are no posts. However, the HTML appears briefly when the page loads and then hides. I thought using ngCloak would solve this issue, but it doesn't seem to be working for me. Here's t ...

javascripthtmlcssangularjs

Guide on integrating a third-party API with React using Express

I'm facing an issue with my React app trying to make a get request to my Express app, which then sends a get request to a third party API to fetch stock prices. Even though the Express app is logging the correct data, I am getting an empty response fr ...

javascriptnode.jsreactjsexpressaxios

Vue-Apollo - The 'value' property is not present in the 'Readonly<Ref<Readonly<any>>>' type

MY CURRENT DILEMMA: In my quest to seamlessly integrate vue-apollo v4 with Typescript, I have encountered a challenge. I am in the process of retrieving data from a simple query using useQuery along with useResult. The default return type of useResult i ...

javascripttypescriptvue.jsvuejs3vue-apollo

The limit of update depth when using useState with an array generated from a map operation

I'm working on a component where I'm creating a list from an array using map. Each li element in the list has a ref attached to it to capture the getBoundingClientRect().x and getBoundingClientRect().y coordinates, which are then stored in a refs ...

javascriptreactjstypescriptreact-hooks

What is the best way to send a prop to my home route following a redirect?

I am working with react-router-dom and I want to pass :id to my first route (/) when redirecting. This is important so that I can access :id in my Interface component and maintain consistent URL structure for my single-page application. Is it feasible to a ...

javascriptnode.jsreactjsreact-router

Update the page's icon every 5 minutes

Looking for assistance in creating a script within Ionic that will either refresh a page every 5 minutes or call the API every 5 minutes. Attempted to utilize the $interval function with no success. Seeking guidance on how and where to begin this project ...

angularjsionic-framework

Is it possible to use different names for the parameters in a function while still maintaining the same

(Apologies for any language barriers!) It's difficult to articulate my thoughts in English, but here is the code I've written: function calculateAge(yearBorn){ return 2020 - yearBorn; } var johnAge = calculateAge(1990); var janeAge = calcul ...

javascript

Getting an input value dynamically in a React variable when there is a change in the input field

I am having an issue with my search text box. I need to extract the value onchange and send a request to an API, but when I try using the normal event.target method, it shows an error. How can I fix this? The problem is that onchange, I need to call a func ...

javascripthtmlreactjs

In Angular-Cli, the variables @Input and @Output are consistently null until they are assigned

Individuals' internal values are printed without any problems, but those obtained using @Input or @Output are not being displayed. child.component.ts @Component({ selector: 'app-form-input', templateUrl: './form-input.component.ht ...

javascriptangulartypescriptangular7

Error Message: SCRIPT5 - Permission Denied When Trying to Open PDF with Javascript

Despite searching through multiple posts on SO, I have yet to find a solution to my issue. We operate a web form within our LAN that utilizes Javascript's OPEN function to open PDF files. Up until recently, everything was working smoothly. However, ...

javascriptaccess-denied

Begin a new session in ASP.NET using C# and JSON

I am currently facing an issue in my ASP.NET C# project where I need to execute a Json by clicking on a tag, but this action ends the session. To resolve this, I have to call the method RestartSesion(). The code for this is located in the MasterPage. Howe ...

javascriptc#asp.netjsonajax

Executing a function by clicking on a DIV with the value of a textbox, instead of clicking directly on the textbox

Here is a function I have: $("#border-radius").click(function(){ var value = $("#border-radius").attr("value"); $("div.editable").click(function (e) { e.stopPropagation(); showUser(value, '2', this.id) $(this).css( ...

javascriptjqueryjquery-selectors