CODEWITHSUNDEEP
javascriptjquery
Kavitha Velayutham
Kavitha Velayutham

Reputation: 703

how to find the string element that match with string only from starting?

In my application i want display the suggestion names based on the character that user types in that input box. I get the user input using keyup event and i have a array of names from that i want to select the names that matches with the user input only from the starting letters. For Example if the user types A the suggestion show the name start with A,(For Ro-Root Valuation) How to do this?

$( document ).ready(function() {
 var usernames = ["Abisi","Bentaven", "Root Valuation", "Leidos Health",  "Visante",  "vendor1",  "yest1", "example"];

    var displayname = [];

    $('#input-text').keyup(function(event){

        var $textValue = $(this).val();
        jQuery.each( usernames,function( i, val ) {
            *** find that matching name ***
               if($textValue == val){
                   displayname.push(val);

               }
            });

    });

Upvotes: 0

Views: 58

Answers (3)

Hacketo
Hacketo

Reputation: 4997

String.prototype.indexOf can tell you if a string contain another string and the index of the first match of that substring.

"Abisi".indexOf("A") == 0

In your case you can use it to retrieve a set of strings that start with the value of the text input

var usernames = ["Abisi","Bentaven", "Root Valuation", "Leidos Health",  "Visante",  "vendor1",  "yest1", "example"];

var displayname = [];

$('#input-text').keyup(function(event){
    var $textValue = $(this).val();
    displayname = [];
    
    if ($textValue.length > 0){
        jQuery.each( usernames,function( i, val ) {
            if(val.indexOf($textValue) === 0){
                displayname.push(val);
            }
        });
    }

    console.log(displayname);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" id="input-text"/>

Upvotes: 0

user4614898
user4614898

Reputation:

You have to make sure that the text typed matches the name:

$textValue = $textValue.toLowerCase();
val = val.toLowerCase();
var is_matched = ($textValue.substr(0, ($textValue.length)) == val.substr(0, ($textValue.length)))

To make sure that you get suggestions you need to send after checking if it is true: 

if (is_matched == true) {
    displayname.push(val);
} else {
    return false;
}

Final Code:

$( document ).ready(function() {
var usernames = ["Abisi","Bentaven", "Root Valuation", "Leidos Health",  "Visante",  "vendor1",  "yest1", "example"];

var displayname = [];
$('#input-text').keyup(function (event) {

var $textValue = $(this).val();
jQuery.each(usernames, function (i, val) {
    $textValue = $textValue.toLowerCase();
    val = val.toLowerCase();
    var is_matched = ($textValue.substr(0, ($textValue.length)) == val.substr(0, ($textValue.length)))
    if (is_matched == true) {
        displayname.push(val);
    } else {
        return false;
    }
});

});

Upvotes: 0

Rakesh_Kumar
Rakesh_Kumar

Reputation: 1442

You can try something like this:

JSFIDDLE: http://jsfiddle.net/bqkobo79/1/

var length= $textValue.length;
displayname=jQuery.grep(usernames, function( element, i ) {
if(element.toLowerCase().substr(0,length)===$textValue.toLowerCase())
    return element;
});

Upvotes: 1

Related Questions