Matching numbers in regex in order in jquery

Question

So recently, I have been trying to implement the keyup function for search after fetching data from database. I have searched quite a few questions on this and did manage to find a regex expression for matching numbers in order

Regex for numbers only

which gave me this expression "^[0-9]+$". I have also searched another question with a regex expression with regards to jquery code in realtime search

How to perform a real time search and filter on a HTML table

So I tried changing regex expression differently to the one in the first question for numbers in a specific order but then it does not seem to work

http://jsfiddle.net/qw5z5abo/

This is my jsfiddle code which I am trying to make work before implementing in my real code so question is which part am I doing it wrongly and how do I also make regex accept only 10 characters? Thanks in advance.

HTML

<input type="text" id="search" placeholder="Type to search">
<table id="table">
 <tr>
  <td>3123124</td>
  <td>438785345</td>
</tr>
<tr>
  <td>123131234</td>
  <td>31234144</td>
</tr>
<tr>
  <td>8909808</td>
  <td>8709090980</td>
</tr>
</table>

JS

var $rows = $('#table tr');
$('#search').keyup(function() {

 var reg = RegExp("^[0-9]+$"), text;

$rows.show().filter(function() {
    text = $(this).val();
    return !reg.isMatch(text);
}).hide();
});

This is the input and result. Result will be shown in a table.

$(".navbar-search").one('click', function(){
$.ajax({
    url: "http://localhost:3000/api/queryAllRecord", // server url
    type: "POST", //POST or GET
    contentType: "application/json",
     // data to send in ajax format or querystring format
    dataType : "JSON", //dataType is you telling jQuery what kind of 
                       response to expect
    success: function(response) {
        alert('success');
         if(response){
            var len = response.length;
            var txt = "";
            if(len > 0){
                for(var i=0;i<len;i++){
                    if(response[i].samID && response[i].itemDescription){
                        txt += "<tr class='rowdata'>
                                <td>"+response[i].samID+"</td>"
                                +"<td>"+response[i].itemDescription+"</td>"
                                +"<td 
                                class='editNumber'>"+response[i].issuedQTY + 
                                "</td>"+"<td 
                                class='editNumber'>"+response[i].openingQTY 
                                + "</td>" + "<td 
                               class='editNumber'>"+response[i].closingQTY+"
                               </td>" +"<td 
                             class='editNumber'>"+response[i].corruptedQTY+"
                               </td>" +"<td>"+response[i].Remarks+"</td>"+"
                               <td>"+response[i].ntaRequestRef+"</td>"
                               +"<td><input class='input button-edit' 
                               type='submit' id='edit' value='Edit' onclick 
                               = 'edit(this)' /></td>" 
                               +"<td><input class='input button-edit' 
                              type='button' id='delete' value='Delete' 
                              onclick='deleteResult(this)' /></td>"+"</tr>";
                    }
                }

                $("#bResults").empty();
                if(txt != ""){
                    $("#results").removeClass("hidden");
                    $("#bResults").append(txt);
                }
            }
        }
    },
    error: function(response) {
        alert('error');
    }
});
event.preventDefault();
});

This is the search that will be executed which will then fetch data from database and put it in a table then I will input search on keyup for searching. Expected input should be something like this 1607180511 and while typing, it is filtering according to what the user typed like if lets say he typed 1607, all those with 1607... should appear or if it is 1607180511 then it will show results of that as well. This is the fiddle code. Sorry for my format of asking questions.

Answer 1

My understanding of your requirement is that you want a "starts with" search. That is, when the user types something in the search field, you want to show only the table rows that have one or more cells starting with the entered value.

In that case you don't want to use a regex like ^[0-9]+$ which tests whether the string is composed of nothing but digits, you need to match on the value entered by the user. You could turn that value into a regex, but it is simpler to just use the string .indexOf() method - if the result of stringToSearch.indexOf(searchString) is 0 that means that searchString was found at the beginning of stringToSearch (whereas a return of -1 means it wasn't found, and greater than 0 means it was found but not at the beginning).

In your function, text = $(this).val(); doesn't make sense because .val() is for form field values, not for getting table row/cell text. You need to use .text() to get the text of the individual cells, but do the showing and hiding at the row level. So maybe a little something like this:

var $rows = $('#table tr');
var $cells = $rows.find('td');

$('#search').keyup(function() {
  var searchText = this.value;
  $rows.hide();
  $cells.filter(function() {
    return $(this).text().indexOf(searchText) === 0;
  }).parent().show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="search" placeholder="Type to search" maxlength="10">
<table id="table">
  <tr>
    <td>3123124</td>
    <td>438785345</td>
  </tr>
  <tr>
    <td>123131234</td>
    <td>31234144</td>
  </tr>
  <tr>
    <td>8909808</td>
    <td>8709090980</td>
  </tr>
</table>

"how do I also make regex accept only 10 characters?"

I don't really see any reason to limit the search term to only 10 characters, but if you want to do that the simplest way is just to add a maxlength="10" attribute on the input element.