Блог

Главная - Вопросы по программированию - Поиск во время ввода, автозаполнение полей ввода при нажатии

Поиск во время ввода, автозаполнение полей ввода при нажатии

#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>
Метки: ,