Live MySQL Database Search по пользовательскому вводу - PullRequest
Новая
       14

Live MySQL Database Search по пользовательскому вводу

0 голосов
/ 17 марта 2019

Итак, я недавно создал этот небольшой скрипт, который просматривает мою базу данных клиентов, когда пользователь начинает вводить текст в определенном поле.

Это позволяет им привязать запись к другой записи, чтобы облегчить ее в будущем.

Однако, когда появляется искомый клиент, он должен щелкнуть по имени, после того как он щелкнет по имени, он заполнит поле.

Однако я должен быть в состоянии определить, на какого клиента он нажал, чтобы я мог сохранить идентификатор клиента в базе данных на будущее.

Пока что скрипт, который я получил, будет отображать 3 столбца, клиенты firstName, lastName и ID.Как можно отделить идентификатор от firstName и lastName, чтобы сохранить его в базе данных?

Это мой поисковый код PHP ... 

try {
$customerConn = new PDO('mysql:host=DATABASE HOST NAME HERE;dbname=DATABASE NAME HERE;charset=utf8', 'USERNAME', 'PASSWORD');  
// echo 'client version: ', $conn->getAttribute(PDO::ATTR_CLIENT_VERSION), "\n";
// echo 'server version: ', $conn->getAttribute(PDO::ATTR_SERVER_VERSION), "\n";
$customerConn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$customerConn->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
}
catch(PDOException $err) {
var_dump($err->getMessage());
die('...');
}

// Attempt search query execution
try{
if(isset($_REQUEST["term"])){
    // create prepared statement
    $sql = "SELECT * FROM customerLeads WHERE lastName LIKE :term";
    $stmt = $customerConn->prepare($sql);
    $term = $_REQUEST["term"] . '%';
    // bind parameters to statement
    $stmt->bindParam(":term", $term);
    // execute the prepared statement
    $stmt->execute();
    if($stmt->rowCount() > 0){
        while($row = $stmt->fetch()){
            echo "<p>".$row['firstName']." ".$row["lastName"]." - ".$row['customerID']."</p>";
        }
    } else{
        echo "<p>No matches found</p>";
    }
}  
} catch(PDOException $e){
die("ERROR: Could not able to execute $sql. " . $e->getMessage());
}

// Close statement
unset($stmt);

// Close connection
unset($customerConn);

Также я заменил детали базы данных только для безопасности!

Редактировать Здесьэто JavaScript, который у меня есть на странице 

        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $('.search-box input[type="text"]').on("keyup input", function(){
            /* Get input value on change */
            var inputVal = $(this).val();
            var resultDropdown = $(this).siblings(".result");
            if(inputVal.length){
                $.get("../../scripts/customerSearch.php", {term: inputVal}).done(function(data){
                    // Display the returned data in browser
                    resultDropdown.html(data);
                });
            } else{
                resultDropdown.empty();
            }
        });

        // Set search input value on click of result item
        $(document).on("click", ".result p", function(){
            $(this).parents(".search-box").find('input[type="text"]').val($(this).text());
            $(this).parent(".result").empty();
        });
    });
    </script>

, а вот соответствующий HTML 

<div class="form-group search-box">
 <label>Customer Name</label>
 <input type="text" placeholder="Search Customer" autocomplete="off" name="customerName">
 <div class="result"></div>
</div> <!-- end .form-group -->

1 Ответ

0 голосов
/ 17 марта 2019

Если я правильно понял (!?), Вы могли бы слегка изменить сгенерированный HTML-код, включив, например, атрибут набора данных, такой как data-cid, который вы могли бы использовать для последующей отправки ajax-запроса на серверную часть, чтобы вы моглисохранить идентификатор клиента.Например - без учета кода Ajax

Привязать прослушиватель событий к контейнеру результатов - прослушиватель будет регистрировать попадания в элементы, которые соответствуют критериям того, чтобы быть тегом абзаца с атрибутом data-cid.Вместо предупреждения просто отправьте ajax-запрос на любой php-скрипт, который будет обрабатывать событие click для customerID / details.

Фрагмент HTML ниже представляет собой эмуляцию сгенерированного HTML из поиска db, который заполняетсяв div.result контейнер 

<div class='form-group'>
    <div class='result'>
        <p data-cid=23>lux interior - 23</p>
        <p data-cid=44>marilyn monroe - 44</p>
        <p data-cid=27>sid vicious - 27</p>
    </div>
</div>

<script>
    document.querySelector('.form-group > div.result').addEventListener('click',e=>{
        e.preventDefault();
        if( e.target!=e.currentTarget && e.target.tagName.toLowerCase()=='p' && e.target.hasAttribute('data-cid') ){
            alert( 'send ajax request to log customerID='+e.target.dataset.cid )
        }
    })
</script>

Модифицированная версия, включающая базовый Ajax-запрос 

<div class='form-group search-box'>
    <label>Customer Name</label>
    <input type='text' placeholder='Search Customer' autocomplete='off' name='customerName'>
    <div class='result'>
        <p data-cid=23>bobby davro - 23</p>
        <p data-cid=44>marilyn monroe - 44</p>
        <p data-cid=27>sid vicious - 27</p>
    </div>
</div>


<script src='//code.jquery.com/jquery-latest.js'></script>
<script>

    let container=document.querySelector('.form-group');
    let results=container.querySelector('div.result');
    let text=container.querySelector( 'input[ name="customerName" ][ type="text" ]' );

    results.addEventListener('click',e=>{
        e.preventDefault();     
        if( e.target!=e.currentTarget && e.target.tagName.toLowerCase()=='p' && e.target.hasAttribute('data-cid') ){
            $.ajax({
                url:location.href,
                data:{cid:e.target.dataset.cid},
                type:'POST',
                error:e=>{ alert('Error: '+e) },
                success:r=>{ alert( 'logged to db: '+r ) }
            });
            text.value=e.target.innerText
        }
    })
</script>
...