#javascript #php #json
Вопрос:
Я изо всех сил пытаюсь заполнить 2 поля ввода событием onclick. На скриншоте ниже показано окно поиска. Пользователь вводит имя в крайнее правое поле, чтобы отобразить результаты сопоставления ниже (например, тестовый тест). При нажатии кнопки «тестовый тест» полное имя должно отображаться в (правом поле) без идентификатора, а идентификатор (87) должен отображаться в (левом поле) без имени.
Вот это fetch.php файл, который запрашивает базу данных MySQL:
while($row = mysqli_fetch_assoc($result))
{
// $dataSource[] = $row;
$client_id = $row['id'];
$first_name = $row['first_name'];
$last_name = $row['last_name'];
// echo "$client_id" . " " . $first_name . " " . $last_name ."n";
echo '<div style="padding:3px">
<button class="button" name="title" id="title" value="'.$client_id. ' '.$first_name.' '.$last_name.'" onclick="setText(this)">'.$first_name.' '.$last_name.'</button>
</div>';
Это тот самый index.php файл:
<body>
<!-- search while typing -->
<script>
$(document).ready(function(e)
{
$("#title").keyup(function()
{
$("#here").show();
var x = $(this).val();
$.ajax(
{
type:'GET',
url:'fetch.php',
data: 'q=' x, /// start search only when first character is entered. q not empty.
success:function(data)
{
$("#here").html(data); /// display results in <div id=here>
}
,
});
});
});
</script>
Форма:
<input type="text" id="client_id" name="client_id" placeholder="ID" onfocus="this.value=''" />
<input type="text" id="status" name="status" placeholder="Status" autocomplete="off" >
<input type="text" id="title" name="title" placeholder="Cliente" autocomplete="off" onfocus="this.value=''" />
<!-- auto fill -->
<script>
function setText(obj){
var val = obj.value;
console.log(val);
function concat(){
var x = document.getElementById('title').value = val;
var y = document.getElementById('client_id').value = val;
//var z = one " " two;
document.getElementById("title").value = x;
document.getElementById("client_id").value = y;
}
concat();
}
</script>
<!-- display search results-->
<div id="here" style="overflow: scroll;">
</div>
Комментарии:
1. Похоже, вам не хватает прослушивателя событий onclick для дочерних элементов div #here для вызова функции setText. после того, как вы нажмете на html, вам, вероятно, потребуется зациклить дочерние элементы и добавить прослушиватель even для щелчка.
2. Привет, тстрэнд66. Как я могу это сделать?
Ответ №1:
Вы можете .split(" ")
разделить свое значение, а затем использовать индекс для получения значения из этого массива .
Демонстрационный код :
function setText(obj) {
var val = obj.value.split(" "); //split
document.getElementById("title").value = val[1] " " val[2]; //firstname-lastname
document.getElementById("client_id").value = val[0]; //id
}
<input type="text" id="client_id" name="client_id" placeholder="ID" onfocus="this.value=''" />
<input type="text" id="status" name="status" placeholder="Status" autocomplete="off">
<input type="text" id="title" name="title" placeholder="Cliente" autocomplete="off" onfocus="this.value=''" />
<!--just for demo-->
<div id="here" style="overflow: scroll;">
<div style="padding:3px">
<button class="button" name="title" value="87 abc abc" onclick="setText(this)">abc abc</button>
</div>
<div style="padding:3px">
<button class="button" name="title" value="82 abc2 abc2" onclick="setText(this)">abc2 abc2</button>
</div>
</div>