Во-первых, я настоятельно рекомендую не заполнять массив JavaScript с помощью PHP.Я бы посоветовал использовать вызов PHP Script с AJAX для обоих.
Во-вторых, нет ничего плохого в вашем скрипте в целом, просто подумайте о некоторой очистке.Вы можете использовать RegEx, если хотите, но я бы посоветовал вам настроить поиск PHP, например:
SELECT customer_name, kId FROM table_name WHERE customer_name LIKE '?%';
Где ? - значение термина, а % - подстановочный знак.Поэтому, если они введут «joh», он будет искать имена, начинающиеся с «joh», и должен выдавать результаты, такие как john и johan.Всегда лучше взвесить сценарий на стороне клиента и поместить его в сценарии на стороне сервера.Вывод результатов через 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>
Обновление
Поскольку #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 даже не вздрогнет.
Надеюсь, это поможет.