Jquery-ui Autocomplete start search from beginning with an array

Question

I'm trying to use jquery-ui native escapeRegex with my search term which I'm failing to do.

The code blow is to get some customer names from the database then list them accordingly. I've one search input which search the main customer then I use the second one to search the secondary customer which get sorted according to the first selected main customers ID, this ID is stored in the text input field named cId.

When the user goes to select the secondary customer my second autocomplete will take the main customer ID form the cId field then send it to PHP which is listed below and get the second customer name and the ID. Which is sent back via JSON as an array.

On my first autocomplete I got the mentioned RegEx function to list out customer names according to the first letter I typed. For an example if I type letter A the script will list all the names starting with A. This is what I want do on my second autocomplete. But I can't understand how to apply the escapeRegex function. I tried out some old answers but none of them worked with my code.

Main PHP page code,

 <div class="usrCreate-form-right">/* Search 1*/
        <label for="cuName">Customer / Kunde:</label><br>
        <input id="cuName" name="cuName" class="usrCreate-form-inputs">
        <input id="cId" class="usrCreate-form-inputs" hidden><br />
        <script type="text/javascript" language="JavaScript">
            var kNames = [
                <?php
                //Loads the data from kunde data base to the MultiDimentional Array
                while ($getKundeRow = $getKundeQuery -> fetch(PDO::FETCH_ASSOC)){ echo '{label:"'.$getKundeRow['customer_name'].'", value:"'.$getKundeRow['kId'].'"},'; }
                ?>
            ];

            $('#cuName').autocomplete({
                source: function( request, response ) {
                    var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
                    response( $.grep( kNames, function( item ){
                        return matcher.test( item.label );
                    }) );
                },
                minLength: 1,
                focus: function (event, ui) {
                    $('#cuName').val(ui.item.label);
                    return false;
                },
                select: function (event, ui) {
                    $('#cuName').val(ui.item.label);
                    $('#cId').val(ui.item.value);
                    return false;
                }
            });
        </script>
    </div>
    <div class="usrCreate-form-left">/*Search 2*/
        <label for="tName">Target / Mal:</label><br>
        <input id="tName" name="tName" class="usrCreate-form-inputs">
        <input id="mid" name="mid" class="usrCreate-form-inputs"><br>
        <script type="text/javascript" language="JavaScript">
            $('#tName').autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "addNewJobProcess.php",
                        dataType: "json",
                        data:{
                            kId: $('#cId').val()
                        },
                        success:function (data) {
                            var re = $.ui.autocomplete.escapeRegex(request.term),
                                matcher = new RegExp("^" + re, "i");

                            response($.map(data.myMalData, function (item) {

                                return{
                                    label: item.mal_name,
                                    value: item.mId
                                }
                            }))
                        }
                    })
                },
                minLength: 1,
                focus:function (event, ui) {
                    $('#tName').val(ui.item.label);
                    return false;
                },
                select: function (event, ui) {
                    $('#tName').val(ui.item.label);
                    $('#mid').val(ui.item.value);
                    return false;
                }
            })
        </script>
    </div>

PHP code for the data base,

include_once("../deLink/deLinker.php");

 if (isset($_GET['kId'])){

 $malNames = array();

 $getMalQuery = $dbConnect -> prepare("SELECT * FROM mal_list WHERE kId = :kid");
 $getMalQuery -> bindValue(':kid', $_GET['kId']);
 $getMalQuery -> execute();

 while($getMalRow = $getMalQuery -> fetch(PDO::FETCH_ASSOC)){
     $malNames['myMalData'][] = array(
         'mal_name' => $getMalRow['Mal Name'],
         'mId' => $getMalRow['mId']
     );
 }

 echo json_encode($malNames);
 }

Yes, 2 autocomplete one is to get the main customer which will on select will set it's main customer ID in a text input named cId. Then the second one will send that cId to the PHP in order to select the second customers who are bound to that main customer ID. I got the regex to list the main customers according to the first letter I want to do the same for my second one. — S4NDM4N
– S4NDM4N, Commented Oct 17, 2018 at 5:31
Ok, so the 2nd autocomplete will have a Source that is dependent on the value of the 1st autocomplete. When a user enters content, you want it to match on the source content at the start of each word. Ok, makes sense. — Twisty
– Twisty, Commented Oct 17, 2018 at 6:42

Twisty · Accepted Answer · 2018-10-17 07:03:20Z

1

First, I would strongly advise against populating the JavaScript Array with PHP. I would advise using a call to a PHP Script with AJAX for both.

Second, nothing wrong with your script overall, just consider some cleanup. You can use RegEx if you like but I would advise you adjust your PHP Search, a query like:

SELECT customer_name, kId FROM table_name WHERE customer_name LIKE '?%';

Where ? is the term value and % is the wildcard. So if they type in "joh", it will search for names that start with "joh" and should provide results like john and johan. It's always better to weight off the client side script and put it on the server side scripts. Echo the results via JSON Encoding.

$(function() {
  $('#cuName').autocomplete({
    source: function(request, response) {
      var q = request.term;
      var r = [];
      $.ajax({
        url: "getCustomerName.php",
        data: {
          query: q
        },
        dataType: "json",
        success: function(data) {
          $.each(data, function(k, v) {
            r.push({
              label: v.customer_name,
              value: v.kId
            });
          });
        }
      });
      response(r);
    },
    minLength: 1,
    focus: function(event, ui) {
      $('#cuName').val(ui.item.label);
      return false;
    },
    select: function(event, ui) {
      $('#cuName').val(ui.item.label);
      $('#cId').val(ui.item.value);
      return false;
    }
  });
  $('#tName').autocomplete({
    source: function(request, response) {
      var sq = $("#cuName").val();
      var q = request.term;
      var r = [];
      $.ajax({
        url: "addNewJobProcess.php",
        dataType: "json",
        data: {
          kId: sq
        },
        success: function(data) {
          $.each(data, function(k, v) {
            if (v.mal_name.indexOf(q) === 0) {
              r.push({
                label: v.mal_name,
                value: v.mId
              });
            }
          });
        }
      });
      response(r);
    },
    minLength: 1,
    focus: function(event, ui) {
      $('#tName').val(ui.item.label);
      return false;
    },
    select: function(event, ui) {
      $('#tName').val(ui.item.label);
      $('#mid').val(ui.item.value);
      return false;
    }
  });
});

<div class="usrCreate-form-right">
  <label for="cuName">Customer / Kunde:</label><br>
  <input id="cuName" name="cuName" class="usrCreate-form-inputs">
  <input id="cId" class="usrCreate-form-inputs" hidden><br />
</div>
<div class="usrCreate-form-left">
  <label for="tName">Target / Mal:</label><br>
  <input id="tName" name="tName" class="usrCreate-form-inputs">
  <input id="mid" name="mid" class="usrCreate-form-inputs"><br>
</div>

Update

Since #tName is conditional on the first, you may consider disabling it until a value has been selected in #cuName.

Also #tName will get whatever source data is returned and will rely on filtering client side. You may consider sending both the Source Query and the Term so that the SQL can do that work for you. So an AJAX like:

$.ajax({
  url: "addNewJobProcess.php",
  dataType: "json",
  data: {
    kId: sq,
    term: q
  },
  success: function(data) {
    $.each(data, function(k, v) {
      r.push({
        label: v.mal_name,
        value: v.mId
      });
    });
  }
});

And then PHP like:

if (isset($_GET['kId']) && isset($_GET['term'])){
  $malNames = array();
  $getMalQuery = $dbConnect -> prepare("SELECT * FROM mal_list WHERE kId = :kid AND mal_name LIKE ':term%'");
  $getMalQuery -> bindValue(':kid', $_GET['kId']);
  $getMalQuery -> bindValue(':term', $_GET['term']);
  $getMalQuery -> execute();

  while($getMalRow = $getMalQuery -> fetch(PDO::FETCH_ASSOC)){
    $malNames['myMalData'][] = array(
      'mal_name' => $getMalRow['Mal Name'],
      'mId' => $getMalRow['mId']
    );
  }
  echo json_encode($malNames);
}

SQL was designed to do this type of heavy lifting, JavaScript wasn't. If you're query has a result set of over a 100... JavaScript will perform poorly. SQL will not even flinch.

Hope that helps.

edited Oct 17, 2018 at 7:03

answered Oct 16, 2018 at 20:10

Twisty

31k2 gold badges30 silver badges50 bronze badges

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

6 Comments

S4NDM4N Over a year ago

Thank you for the reply, I made a comment above describing more what I want to do. I know what I've done with the first autocomplete not good I will be changing that to a PHP script. What I really wanted to is to get the suggestions list according the first letter I type the first autocomplete does that. When I type A it will only list names which would start with the letter A. I want to do the same on the second one.

S4NDM4N Over a year ago

Thank you, Just a small clarification do I have to make changes to my PHP where I'm doing the processing part. Also about disabling the second search, I will be doing that once I get the searching part working.

Twisty Over a year ago

@Sand see additional update. No, you should not have to, but I would suggest you consider some changes.

S4NDM4N Over a year ago

Thank you, Now I see I was just trying to do more with JS than SQL and I was worried my first search making things go slower once the entire customer base get transferred. This will help to speed things up also thank you for the time you spent on this. Finally what do you suggest I change on my PHP code, only the once you have changed or something more.

Twisty Over a year ago

@Sand that would depend on what else is in your code. I would try to keep it simple. Make the best of the tools that you have. Remember the server side code has access to stronger resources, not always better, but stronger. Is your code meeting your needs? Or is it doing more than you need? Ponder that and if you run into trouble or something, can post another question.

|

Collectives™ on Stack Overflow

Jquery-ui Autocomplete start search from beginning with an array

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest