New Twiddle

components.my-component.js

import Ember from 'ember';
import { A } from '@ember/array';
import { set, get } from '@ember/object';
export default Ember.Component.extend({
  
  searchVal : '',
 
  keyUp(){
	let self = this,
      record = [
        {'display_name': 'Renu', 'email_id': 'renu@zohocorp.com'},
        {'display_name': 'Revathi Ram', 'email_id': 'revathi@zohocorp.com'},
        {'display_name': 'Renuga panneer', 'email_id': 'panneer@zohocorp.com'},
        {'display_name': 'Panneer selvam', 'email_id': 'panneerselvam@zohocorp.com'},
        {'display_name': 'Selvam', 'email_id': 'selvam@zohocorp.com'},
        {'display_name': 'Selva kumar', 'email_id': 'selvakumar@zohocorp.com'},
        {'display_name': 'Kumar', 'email_id': 'kumar@zohocorp.com'},
        {'display_name': 'Kutty', 'email_id': 'kutty@zohocorp.com'},
        {'display_name': 'Balaji', 'email_id': 'balaji@zohocorp.com'},
        {'display_name': 'Bala', 'email_id': 'bala@zohocorp.com'},
        {'display_name': 'Priya selvi', 'email_id': 'priya@zohocorp.com'},
        {'display_name': 'Priyanga Kumar', 'email_id': 'priyangakumar@zohocorp.com'},
        ]
        
    	 let	matched_records = A(),
	    	search_obj = {
    				search_obj: record.toArray(),
    				search_property: ['email_id', 'display_name'], // No I18N
    				search_value: get(self, 'searchVal'),
    				search_results_limit: 3,
    				search_uniq: true,
    				search_uniqBy: 'email_id' // No I18N
    		};
			
    	matched_records = self.filterTheRecordGivenString(search_obj);

      console.log('filterTheRecordGivenString>>>>>', matched_records)

  },
                
	filterTheRecordGivenString(search_obj) {

		let self = this,
			search_matches = A(),
			record = get(search_obj, 'search_obj'),
			search_value = get(search_obj, 'search_value'),
			search_property = get(search_obj, 'search_property'),
			search_results_limit = get(search_obj, 'search_results_limit') ? get(search_obj, 'search_results_limit') : 5,
			searchproperty_array = typeof search_property === 'object' ? search_property : search_property.split(','); // No I18N

		search_matches.push(self.searchMatches(record, searchproperty_array, search_value, search_results_limit, search_obj));

		search_matches = [].concat(...search_matches);

		if (search_matches.length >= search_results_limit) {
			search_matches = search_matches.slice(0, search_results_limit);
		}

		return search_matches;
	},
    
    searchMatches(record, search_property, search_value, search_results_limit, search_obj) {

    	let matched_records = A(),
          finalRecord = A(),
          secondary_matched_records = A(),
    		search_val = search_value.toLowerCase();
	
    	for (let i = 0; i < get(record, 'length'); i++) {
    		for (let k = 0; k < get(search_property, 'length'); k++) {
      			if (get(record[i], search_property[k])) {

      				let property_value_lowercase = get(record[i], search_property[k]).toLowerCase(),
      				split_property_value_lowercase = get(record[i], search_property[k]).trim().split(/\s+/g);

      				if (property_value_lowercase.startsWith(search_val)) {
      					matched_records.push(record[i]);
      				}

      				if (get(split_property_value_lowercase, 'length') > 1) {

      					split_property_value_lowercase.forEach((obj) => {

      						if (obj.toLowerCase().startsWith(search_val)) {
      							secondary_matched_records.push(record[i]);
      						}

      					});
      				}

      			}
			   }
			
         if(matched_records.length){
           console.log('<<-----match---->>')
           matched_records.forEach(function(obj){
             console.log('matched_rcord>>', get(obj, 'name'))
           })
           finalRecord.pushObjects(matched_records);
         }
   
         if(secondary_matched_records.length){
           console.log('<<----second----->>')
           secondary_matched_records.forEach(function(obj){
             console.log('secondary_matched_records>>', get(obj, 'name'))
           })
           finalRecord.pushObjects(secondary_matched_records);
         }

         if (get(search_obj, 'search_uniq')) {
           finalRecord = finalRecord.uniqBy(get(search_obj, 'search_uniqBy'));
         }
          
      	if (get(matched_records, 'length') >= search_results_limit) {
  				console.log('LOOP BREAKED>>>');
  				break;
  			}
    	}
    	return matched_records;

    }
                
  
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{my-component}}
{{outlet}}
<br>
<br>

templates.components.my-component.hbs

{{input value=searchVal type="text"}}

{{yield}}

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}