jQuery Partial array match user input?

Question

I've been working on a postcode checker which I need to have a partial match on the array. ie: if the user current uses L20 it shows true but if the uses L20 1WE if shows false.

I need it to read the array and if any part of the user input matches it shows true.

I have a demo up here: 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;
});

That's my code thus far. I know I'm missing something silly but can't work it out

L20 1WE ? I can't understand this part: if the user current uses L20 it shows true but if the uses L20 1WE if shows false — Pedram
– Pedram, Commented Feb 2, 2020 at 10:33
L20 1WE if shows false must be true as he wants partial matches — ANIK ISLAM SHOJIB
– ANIK ISLAM SHOJIB, Commented Feb 2, 2020 at 10:35
It doesn't partial match, it's only working for an exact match currently. — Paul
– Paul, Commented Feb 2, 2020 at 10:35
What do you mean by part ? Is it a sequence of characters between spaces or the string's start and end ? — Titus
– Titus, Commented Feb 2, 2020 at 10:38

Mamun · Accepted Answer · 2020-02-02 11:44:58Z

1

You can split the input then use some() and includes() like the following way:

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>

Maybe, splitting and matching do not required. Simply checking if the current value includes any item of the array.

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>

edited Feb 2, 2020 at 11:44

answered Feb 2, 2020 at 10:39

Mamun

69k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Paul Over a year ago

Awesome that's almost it! It still shows false if the user doesn't add a space ie: L201WE.

Mamun Over a year ago

@Paul, if there is no space then you can chuck the input with 3 characters, updated the answer, please check:)

Titus Over a year ago

This will still fail is the input is something like L1ABC. It should match because L1 (two characters not three) is in the array.

Titus Over a year ago

You can use something like postcodes.some(c => userInput.contains(c)) (and maybe lowercase both c and userInput).

Titus Over a year ago

I've meant to say .includes(..) (as in String.prototype.includes()) or maybe .startsWith(..) will be better, that depends on what the OP wants, it is not clear what he means by part.

|

Oluwafemi Sule · Accepted Answer · 2020-02-02 10:50:25Z

1

$.inArray does a strict check between postcode and values in postcodes array.

Since you're checking that postcode entered by user is prefixed by any postcode in postcodes array you need to write a custom filter for that.

Find every matched postcode in postcode array to the first part of the post code entry.

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

Check the length of the matched postcode and verify that there is a match.

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.');
}

edited Feb 2, 2020 at 10:50

answered Feb 2, 2020 at 10:41

Oluwafemi Sule

39.3k1 gold badge63 silver badges88 bronze badges

Collectives™ on Stack Overflow

jQuery Partial array match user input?

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related