#javascript #php #jquery #json #autocomplete
#javascript #php #jquery #json #автозаполнение
Вопрос:
Хорошо, итак, у меня есть эта форма :
Когда имя вводится в первом вводе, мне нужно заполнить «ID» и «Email» данными из таблицы SQL. Ввод имени выполняется автоматически с помощью JSON, вот пример JSON:
[{
"label": "Andre Nadeau",
"Num": "104J",
"email": "Andre.Nadeau@example.com"
}, {
"label": "Andre Potvin",
"Num": "130J",
"email": "Andre.Potvin@example.com"
}],
Я могу автозаполнить поле имени, но я не понимаю, как отправить данные для идентификатора и электронной почты в других полях.
PHP :
$query = $db->query("SELECT * FROM info_employer WHERE Prenom LIKE '%".$searchTerm."%' ORDER BY Prenom ASC");
while ($row = $query->fetch_assoc()) {
$data[] = array(
'label' => $row['Prenom'] . ' ' . $row['Nom'],
'Num' => $row['Num'],
'email' => $row['Email']
);}
HTML:
<script>
$(function() {
$( "#Nom" ).autocomplete({
source: 'Search.php',
})
})
</script>
<div class="form-group">
<label for="Name">Nom: </label>
<input type="text" id="Nom" class="form-control" name="Nom" required>
<label for="Num">ID: </label>
<input type="text" id="Num" class="form-control" name="Num">
<label for="Email">Email: </label>
<input type="text" id="Email" class="form-control" name="Email">
Редактировать:
Я пытаюсь работать с ответом Feeda, все имеет большой смысл, но у меня возникают трудности с тем, чтобы заставить его работать.
Я изменил свой PHP на :
$searchTerm = $_GET['term'];
//get matched data from table
$query = $db->query("SELECT * FROM info_employer WHERE Prenom LIKE '%".$searchTerm."%' ORDER BY Prenom ASC");
while ($row = $query->fetch_assoc()) {
switch($option) {
case 'nom':
$data[] = $row['Prenom'] . ' ' . $row['Nom'];
case 'email':
$data[] = $row['Email'];
}
И Javascript для :
<script>
$(function() {
$( "#Nom" ).autocomplete({ source: 'Search.php?option=name', })
$( "#email" ).autocomplete({ source: 'Search.php?option=email', })
})
</script>
Если я правильно понимаю, я должен иметь возможность использовать /Search.php?option=nom и увидеть некоторые данные, но когда я пытаюсь в браузере, у меня появляется пустая страница с «null».
И, конечно, мое автозаполнение пока не работает:(
Обновить
На данный момент я не уверен, что было бы лучше, если бы я создал новый вопрос, но я почти на месте!
I’m able to get the data I need with all the help I got here( Thanks everyone <3)
My problem now is that I can find a user using the «Name» field in my form, but once I selected the user I need the email field to be completed automatically using the email linked to the user in my database…
So here is where I’m at for the code :
HTML
$(function() {
$( «#Nom» ).autocomplete({ source: ‘Search.php?option=nom’, })
$( «#email» ).autocomplete({ source: ‘Search.php?option=email’, })
})
PHP
//get search term
$option = $_GET['option'];
$searchTerm = $_GET['term'];
//get matched data from table
$query = $db->query("SELECT * FROM info_employer WHERE Prenom LIKE '%".$searchTerm."%' ORDER BY Prenom ASC");
while ($row = $query->fetch_assoc()) {
switch($option) {
case 'nom':
$data[] = $row['Prenom'] . ' ' . $row['Nom'];
case 'email':
$data[] = $row['Email'];
}
}
//return json data
echo json_encode($data);
Я думаю, что я должен использовать Ajax для этой последней части бота, как вы, наверное, уже догадались, это не один из моих навыков.
ДОПОЛНИТЕЛЬНЫЕ ОБНОВЛЕНИЯ
Следуя совету gschambial :
HTML
<script>
$(function(){
$('#Nom').autocomplete({
minLength: 0,
source: function (request, response) {
$.ajax({
type: "GET",
url: 'Search.php',
dataType: "json",
data: {term : request.term},
dataType: "json",
success: function (data) {
$.each(data,function(key, item){
return {
label : item.NumColumnName,
value : item.EmailColumnName
};
});
},
error: function (result) {
alert("Error");
}
});
},
select: function (event, ui) {
var Num = $("#Num");
var Email = $("#Email");
Num.val(ui.item.label);
Email.val(ui.item.value);
}
});
});
PHP
$searchTerm = $_GET['term'];
//get matched data from table
$query = $db->query("SELECT * FROM info_employer WHERE Prenom LIKE '%".$searchTerm."%' ORDER BY Prenom ASC");
while ($row = $query->fetch_assoc()) {
switch($option) {
case 'nom':
$data[] = $row['Prenom'] . ' ' . $row['Nom'];
case 'email':
$data[] = $row['Email'];
}
}
//return json data
echo json_encode($data);
По-прежнему безуспешно!
Комментарии:
1. можете ли вы
$(function() { $.ajax({ method: 'POST', url: 'Search.php' success: function(response) { console.log(response); }); });
выполнить этот код и сказать мне, что возвращается из вашего php-файла?2. Я попробовал код, и он вернул неперехваченный SyntaxError: неожиданный идентификатор в консоли, не уверен, что я чего-то не хватает
Ответ №1:
Автозаполнение принимает массив, поэтому создает из них отдельные массивы и получает их через ajax. и затем назначьте источник соответственно для каждого.
while ($row = $query->fetch_assoc()) {
$data['names'][] = $row['Prenom'] . ' ' . $row['Nom'];
$data['ids'][] = $row['Num'];
$data['emails'][] = $row['email'];
}
в JavaScript:
source : data.names;
ещё:
вместо исходного кода: Search.php попробуйте. Поиск.php?опция=имя
На PHP.
switch($option) {
case 'name':
$data[] = $row['Prenom'] . ' ' . $row['Nom'];
case 'email':
$data[] = $row['email'];
..
}
Комментарии:
1. Решение имеет большой смысл, но я, честно говоря, понятия не имею, как работать с ajax. Я понимаю часть PHP, но мне потребуется немного больше помощи для JavaScript.
2. Хорошо, я понимаю переключатель, но как это приведет к автозаполнению поля «Электронная почта», когда я ввожу имя в поле name ?
3. $( «#Nom» ).автозаполнение ({ источник: ‘Search.php?option=name’, }) $(«#email» ).автозаполнение ({ источник: ‘Search.php?option=email’, })
4. Я действительно ценю время, которое вы уделяете, чтобы помочь мне,
5. Я отредактировал вопрос с внесенным изменением, если у вас есть время взглянуть 🙂
Ответ №2:
Я думаю, вам нужно что-то вроде этого:
$(function(){
$('#Nom').autocomplete({
minLength: 0,
source: function (request, response) {
$.ajax({
type: "POST",
url: 'Search.php',
dataType: "json",
data: {term : request.term},
success: function (data) {
$.each(data,function(key, item){
return {
label : item.nom,
value : item.email
};
});
},
error: function (result) {
alert("Error");
}
});
},
select: function (event, ui) {
var Num = $("#Num");
var Email = $("#Email");
Num.val(ui.item.label);
Email.val(ui.item.value);
}
});
});
PHP-КОД:
$post_data= json_decode(file_get_contents('php://input'), true);
print_r($post_data);
$searchTerm = $post_data["term"];
$data= array();
//get matched data from table
$query = $db->query("SELECT * FROM info_employer WHERE Prenom LIKE '%".$searchTerm."%' ORDER BY Prenom ASC");
while ($row = $query->fetch_assoc()) {
$data["nom"] = $row['Prenom'] . ' ' . $row['Nom'];
$data["email"] = $row['Email'];
}
//return json data
echo json_encode($data);
Попробуйте это! Я надеюсь, это решит вашу задачу.
Комментарии:
1. Спасибо за ввод, если я использую точную копию функции, которую вы мне дали, я получаю некоторую ошибку в моем error.log : PHP Notice: Неопределенный индекс: опция в /var/www/html/Search.php в строке 12 ссылка: absence.com Уведомление PHP: Неопределенный индекс: термин в /var/www/html/Search.php в строке 13 ссылка: absence.com Примечание PHP: Неопределенная переменная: данные в /var/www/html/Search.php в строке 31 ссылка: absence.com
2. @ayyyymtl Эта ошибка возникает, когда у вас есть некоторые неинициализированные переменные.
3. Изменено
searchTerm
наterm
. Проверьте мой обновленный ответ.4. @ayyyymtl также удалите
$option = $_GET['option'];
из вашегоSearch.php
файла.5. @ayyyymtl Не волнуйтесь, автозаполнение работает, отлично. Теперь мы перейдем к следующей части.