jQuery Частичный массив соответствует пользовательскому вводу?

Question

Я работал над проверкой почтового индекса, который должен иметь частичное совпадение в массиве. ie: если текущий пользователь использует L20, он показывает true, но если использует L20 1WE, если показывает false.

Мне нужно, чтобы он прочитал массив, и если какая-либо часть пользовательского ввода соответствует, это показывает true.

У меня есть демо здесь: https://codepen.io/paulmaloney/pen/dfa0603f200a8f5be89b0a10d7ba80f6

var postcodes = ["PR8","PR9","WA11","L1","L2","L20","L80"];

$('#searchForm').submit(function(){
    var postcode = $('#searchForm input').val();  
    if($.inArray(postcode.toUpperCase(), postcodes ) > -1){
        $('#result').html('Yes, we cover your area!');
    }else{
        $('#result').html('Sorry, it looks like we do not cover that area yet.');
    }

    return false;
});

Это мой код до сих пор. Я знаю, что упускаю что-то глупое, но не могу разобраться

Answer 1

$. InArray выполняет строгую проверку между postcode и значениями в массиве postcodes.

Поскольку вы проверяете, что postcode, введенный пользователем, имеет префикс любого postcode в массиве postcodes, для которого нужно написать собственный фильтр.

Найти каждый соответствующий почтовый индекс в массиве postcode для первой части записи почтового индекса.

postcodePart = postcode.toUppercase().split(' ').shift()
matches = postcodes.filter(
  postcode => new RegExp("^" + postcode + "$").test(postcodePart)
)

Проверьте длину соответствующего почтового индекса и убедитесь, что есть совпадение.

if (matches.length == 1) {
   $('#result').html('Yes, we cover your area!');
} else {
   $('#result').html('Sorry, it looks like we do not cover that area yet.');
}

Answer 2

Вы можете разделить вход, затем использовать some() и includes() следующим образом:

var postcodes = ["PR8","PR9","WA11","L1","L2","L20","L80"];

$('#searchForm').submit(function(){
    var postcode = $('#searchForm input').val().toUpperCase();
    postcode = postcode.trim().includes(' ') ? postcode.split(' ') : postcode.match(/.{1,3}/g);
    if(postcode.some(i => postcodes.includes(i))){
        $('#result').html('Yes, we cover your area!');
    }else{
        $('#result').html('Sorry, it looks like we do not cover that area yet.');
    }

    return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form role="search" id="searchForm">
  <input type="text" name="s" class="form-control covered-area-search-input" placeholder="Enter the first half of your postcode...">
  <input type="submit" value="Search"/> 
</form>
<div id="result"></div>

Возможно, разбиение и сопоставление не требуется. Просто проверьте, включает ли текущее значение какой-либо элемент массива.

var postcodes = ["PR8","PR9","WA11","L1","L2","L20","L80"];

$('#searchForm').submit(function(){
    var postcode = $('#searchForm input').val().toUpperCase();
    if(postcodes.some(i => postcode.includes(i))){
        $('#result').html('Yes, we cover your area!');
    }else{
        $('#result').html('Sorry, it looks like we do not cover that area yet.');
    }

    return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form role="search" id="searchForm">
  <input type="text" name="s" class="form-control covered-area-search-input" placeholder="Enter the first half of your postcode...">
  <input type="submit" value="Search"/> 
</form>
<div id="result"></div>