PHP - Ajax: поиск в реальном времени с выпадающим списком и присвоение значения по клику - PullRequest
Новая
       1

PHP - Ajax: поиск в реальном времени с выпадающим списком и присвоение значения по клику

0 голосов
/ 17 января 2020

Я осуществляю поиск в режиме реального времени, используя html, введите "search", и под ним должен быть показан результат, чтобы пользователь мог выбрать правильное имя. как только клиент выбирает имя, он присваивает идентификатор выбранного имени другому скрытому вводу «id». ниже приведены данные моего кода:

index. php

<?php

?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP Live MySQL Database Search</title>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
  $("#search").keyup(function(){
    var txt = $(this).val();
    var resultDropdown = $(this).siblings(".result");
    var personname = "";
    var personID = "";
    if (txt !='')
    {
        $.ajax
        (
        {
            type:"post",    //submit method
            url: "search.php",  //url to sumitted data To
            data: {name : txt}, //Data to be submitted
            cache: false,
            dataType: 'json',
            //action on successful post request
            success: function(data)
            {
                //process JSON
                $.each(data.names, function(idx, name){

                    var person = "<p>" + name.name +"</p>";
                    resultDropdown.html(person);
                });

            },
        }
        )
    }
    else
    {
        resultDropdown.empty();
    }
  });

   // Set search input value on click of result item


});
</script>

</head>
<body>
<form method="post" action="result.php">
    <div class="search-box">

        <input type="text" id="search" autocomplete="off" name="spousename" placeholder="search spouse" />
        <input type="hidden" id="id" autocomplete="off" name="spouseid" placeholder="search spouse" />
        <input class="w3-button w3-block w3-green w3-section w3-padding" type="submit" name="access"><b>Login</b></button>
        <div class="result"></div>
    </div>
</form>
</body>
</html>

возвращенные данные из поиска. php

{"names":[{"name":" xxxxxx","id":3},{"name":"yyyy","id":6},{"name":"zzzz","id":5}]}

Проблемы, с которыми я сталкиваюсь: 1- resultDropdown . html (персона): показывать только последний элемент в json

2 - как назначить идентификатор при нажатии

Ответы [ 2 ]

0 голосов
/ 17 января 2020

это полный код, если какой-то 

<?php

?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP Live MySQL Database Search</title>
<style type="text/css">
    body{
        font-family: Arail, sans-serif;
    }
    /* Formatting search box */
    .search-box{
        width: 300px;
        position: relative;
        display: inline-block;
        font-size: 14px;
    }
    .search-box input[type="text"]{
        height: 32px;
        padding: 5px 10px;
        border: 1px solid #CCCCCC;
        font-size: 14px;
    }
    .result{
        position: absolute;        
        z-index: 999;
        top: 100%;
        left: 0;
    }
    .search-box input[type="text"], .result{
        width: 100%;
        box-sizing: border-box;
    }
    /* Formatting result items */
    .result p{
        margin: 0;
        padding: 7px 10px;
        border: 1px solid #CCCCCC;
        border-top: none;
        cursor: pointer;
    }
    .result p:hover{
        background: #f2f2f2;
    }
</style>



<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
  $("#search").keyup(function(){
    var txt = $(this).val();
    var resultDropdown = $(".result");
    var person = "";
    if (txt !='')
    {
        $.ajax
        (
        {
            type:"post",    //submit method
            url: "search.php",  //url to sumitted data To
            data: {name : txt}, //Data to be submitted
            cache: false,
            dataType: 'json',
            //action on successful post request
            success: function(data)
            {
                //process JSON
                $.each(data.names, function(idx, name){
                    person += '<p data-id="'+ name.id +'">' + name.name +'</p>';

                });
                resultDropdown.html(person);

            },
        }
        )
    }
    else
    {
        resultDropdown.empty();
    }
  });

   // Get the id of the clicked person
        $(document).on("click", ".result p", function(){
            //assign the value of person name to search input 
        $(this).parents(".search-box").find('#search').val($(this).text());

        //get the id 
        var id = $(this).attr('data-id');
        //set input id "id" value 
         $("#id").val(id);
        //clear search data
         $(this).parent(".result").empty();
    })


});
</script>

</head>
<body>
<form method="post" action="result.php">
    <div class="search-box">

        <input type="text" id="search" autocomplete="off" name="spousename" placeholder="search spouse" />
        <input type="hidden" id="id" autocomplete="off" name="spouseid" placeholder="search spouse" />
        <input class="w3-button w3-block w3-green w3-section w3-padding" type="submit" name="access"><b>Submit</b></button>
        <div class="result"></div>
    </div>
</form>
</body>
</html>
0 голосов
/ 17 января 2020

присваивает html переменной, а затем отображает ее после l oop

var resultDropdown = $(".result");

success: function(data)
                    {
    var person = "";
                    //process JSON
                    $.each(data.names, function(idx, name){

                        person += '<p class="name" data-id="'+ name.id +'">' + name.name +'</p>';

                    });
    resultDropdown.html(person);

                }

// Get the id of the clicked person
        $(document).on('click', '.name', function(){
    var id = $(this).attr('data-id');
})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...