Поиск по Javascript, который соответствует строке

Question

Мне нужно выполнить поиск в массиве плодов, который соответствует точной позиции символа.

var fruits = ["Apple", "Orange", "Grapes", "Banana", "Guava", "Apricot", "Avocado", "Cherry", "Water Melon"]; 

Если я типа затем все имена фруктов, которые содержат фильтруются. Мне нужны имена фруктов, которые начинаются с только.

var fruits = ["Apple", "Orange", "Grapes", "Banana", "Guava", "Apricot", "Avocado", "Cherry", "Water Melon"]; 
 

 
$(document).ready(function() { 
 
    row = ''; 
 
    i = 1; 
 
    $.each(fruits, function (key, fruit) { 
 
     row = row + "<tr><td>" + i + "</td><td>" + fruit + "</td></tr>" 
 
     i++; 
 
    }) 
 
    $("table tbody").append(row); 
 
}) 
 

 
$(".search").keyup(function() { 
 
    $("table tbody tr").each(function() { 
 
     if ($(this).find("td:eq(1)").text().toUpperCase().indexOf($(".search").val().toUpperCase()) != -1) { 
 
      $(this).show(); 
 
     } else { 
 
      $(this).hide(); 
 
     } 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="text" class="search"> 
 
<table> 
 
    <tbody> 
 
    </tbody> 
 
</table>

fiddle

Answer 1

Изменение этой линии,

if($(this).find("td:eq(1)").text().toUpperCase().indexOf($(".search").val().toUpperCase())!=-1) 

с этой линией

if($(this).find("td:eq(1)").text().toUpperCase().indexOf($(".search").val().toUpperCase())==0) 

и он должен работать

Answer 2

Попробуйте этот пример

var fruits = ["Apple", "Orange", "Grapes", "Banana", "Guava", "Apricot", "Avocado", "Cherry", "Water Melon"]; 
 

 
$(document).ready(function() { 
 
    row = ''; 
 
    i = 1; 
 
    $.each(fruits, function (key, fruit) { 
 
     row = row + "<tr><td>" + i + "</td><td>" + fruit + "</td></tr>" 
 
     i++; 
 
    }) 
 
    $("table tbody").append(row); 
 
}) 
 

 
$(".search").keyup(function() { 
 
    $("table tbody tr").each(function() { 
 
     if ($(this).find("td:eq(1)").text().toUpperCase().indexOf($(".search").val().toUpperCase()) == 0) { 
 
      $(this).show(); 
 
     } else { 
 
      $(this).hide(); 
 
     } 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="text" class="search"> 
 
<table> 
 
    <tbody> 
 
    </tbody> 
 
</table>

JsFiddle