单击更新与自动建议 - Onclick update with autosuggestion

Onclick update with autosuggestion

本文关键字：更新单击 | 更新日期: 2023-09-27

我创建了一个自动建议，以便在输入 html 字段时显示数据库表的结果，我想使用 javascript 从自动建议中的值所在的同一行中发布另一个值。

https://i.stack.imgur.com/gIhqK.png

这两个建议都有自己的数字，

它们不是重复的，而是我需要帮助的地方，我希望这些建议中的任何一行中的数字发布在下面的数字字段中。

这是 html 表单

                    <div class="floatingBox">
                        <div class="container-fluid">
                            <form class="contentForm" form method="POST" form action="index.php">
                                    <div class="control-group">
                                    <label class="control-label">Name:*</label>
                                    <div class="controls">
                                      <input type="text" name="name" class="span4 autosuggest">
                                       <div class="control-group" >
                                       <div class="dropdown">
                                       <ul class="result"></ul></div>
                                    <label class="control-label">Number:*</label>
                                    <div class="controls">
                                      <input type="text" class="span4 number" name="number" placeholder="ex: ######">
                                    </div>

这是Javascript

$(document).ready(function() {
$('.span4.autosuggest').keyup(function() {
    var search_term = $(this).attr('value');
    $.post('ajax/search.php', {search_term:search_term}, function(data){
        $('.result').html(data);
        $('.result li') .click(function() {
            var result_value = $(this).text();
            $('.span4.autosuggest').attr('value', result_value);
            $('.result').html('');
            });

        });
    });
});

这是从数据库表中提取信息的 PHP

<?
include '../connect.php';
 if(isset($_POST['search_term']) == true && empty($_POST['search_term']) == false) {
$search_term = mysql_real_escape_string($_POST['search_term']);
$query = mysql_query("SELECT * FROM *table* WHERE id = '$userid' AND name LIKE '$search_term%' ");
while(($row = mysql_fetch_assoc($query)) !== false){
    echo '<li>', $row['client_name'], '</li>';
    }
} 
      ?>

使用 PHP 发出 JSON 而不是 HTML。然后用 Javscript 填充字段。

PHP（假设包含数字的行称为"client_number"）

<?
include '../connect.php';
if(isset($_POST['search_term']) == true && empty($_POST['search_term']) == false) {
   $search_term = mysql_real_escape_string($_POST['search_term']);
   $query = mysql_query("SELECT * FROM *table* WHERE id = '$userid' AND name LIKE '$search_term%' ");
   $results = array();
   while(($row = mysql_fetch_assoc($query)) !== false) {
     $results[] = array('client_name' => $row['client_name'], 'client_number' => $row['client_number']);
   }
   header("Content-Type: application/json");
   echo json_encode($results);
}
?>

爪哇语

$(document).ready(function() {
  $('.span4.autosuggest').keyup(function() {
     var search_term = $(this).attr('value');
     $.post('ajax/search.php', {search_term:search_term}, function(data){
        for(var k in data) {
          $('.result').append("<li data-number='"+data[k].client_number+"'>"+data[k].client_name+"</li>");
        }
        $('.result li') .click(function() {
           $('.span4.autosuggest').val($(this).text());
           $('.span4.number').val($(this).data("number"));
           $('.result').html('');
        });
      });
   });
});