CODEWITHSUNDEEP
javascriptjqueryhtml
noder
noder

Reputation: 170

I can't set input value when match with user input?

I have three input box but the last two are disable for input . When user input in first input , I matching with json data com and if there match exist the last two input will automatically set value from matched json.

For now, my code is not working for all name input !

input -> acid -> not working

input -> gosd -> working

var com = [
{id:1,name:"Acid",phone:4455,address:'Main'},
{id:2,name:"Gosd",phone:555,address:'Lab'}
];


$('[name="com-name"]').on("keyup",function () {
  com.filter(v => {
    if(v.name.toLowerCase() == $(this).val().toLowerCase() ) {
        $('[name="com-pho"]').val(v.phone);
        $('[name="com-add"]').val(v.address);
        return false;
    }
    $('[name="com-pho"]').val('');
    $('[name="com-add"]').val('');
  })
});
input:not(:nth-of-type(1)) {
pointer-events:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="com-name"><br>
<input type="text" name="com-pho"><br>
<input type="text" name="com-add">

Upvotes: 1

Views: 43

Answers (1)

Vineesh
Vineesh

Reputation: 3782

You should remove the code which empty the values from textboxes and move it to the beginning

var com = [
{id:1,name:"Acid",phone:4455,address:'Main'},
{id:2,name:"Gosd",phone:555,address:'Lab'}
];


$('[name="com-name"]').on("keyup",function () {
   $('[name="com-pho"]').val('');
   $('[name="com-add"]').val('');
  com.filter(v => {
    if(v.name.toLowerCase() == $(this).val().toLowerCase() ) {
        $('[name="com-pho"]').val(v.phone);
        $('[name="com-add"]').val(v.address);
        return false;
    }
    
  })
});
input:not(:nth-of-type(1)) {
pointer-events:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="com-name"><br>
<input type="text" name="com-pho"><br>
<input type="text" name="com-add">

Upvotes: 2

Related Questions