Question

我正在尝试将jquery-ui本机的escapeRegex与我搜索失败的词一起使用。

代码的打击是从数据库中获取一些客户名称，然后相应地列出它们。我有一个搜索输入用于搜索主要客户，然后使用第二个搜索输入来搜索根据第一个选择的主要客户ID进行排序的次客户，该ID存储在名为cId的文本输入字段中。

当用户选择第二个客户时，我的第二个自动完成功能将从cId字段中获取主要客户ID，然后将其发送到下面列出的PHP，并获取第二个客户名称和ID。通过JSON作为数组发送回来的。

在我的第一个自动完成功能上，我得到了提到的RegEx函数，可以根据我输入的第一个字母列出客户名称。例如，如果我输入字母A，脚本将列出所有以A开头的名称。这是我要在第二次自动完成时执行的操作。但是我不明白如何应用escapeRegex函数。我尝试了一些旧答案，但没有一个与我的代码一起使用。

PHP主页面代码，

 <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代码，

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

Answer 1

首先，我强烈建议不要用PHP填充JavaScript数组。我建议同时使用带有AJAX的PHP脚本调用。

第二，总体而言，您的脚本没有任何问题，只需考虑进行一些清理即可。您可以根据需要使用RegEx，但我建议您调整PHP搜索，例如：

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

其中?是术语值，%是通配符。因此，如果键入“ joh”，它将搜索以“ joh”开头的名称，并应提供诸如john和johan的结果。最好权衡客户端脚本并将其放在服务器端脚本上。通过JSON编码回显结果。

$(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>

更新

由于#tName首先是有条件的，因此您可以考虑禁用它，直到在#cuName中选择了一个值为止。

#tName还将获得返回的任何源数据，并将依赖于筛选客户端。您可以考虑同时发送源查询和术语，以便SQL可以为您完成这项工作。像这样的AJAX：

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

然后是PHP，例如：

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旨在完成这种繁重的工作，而JavaScript并非如此。如果查询的结果集超过100，则JavaScript的效果会很差。 SQL甚至不会退缩。

希望有帮助。

jQuery-ui Autocomplete从数组开头开始搜索

1 个答案: