javascript - 通过自动建议进行 Onclick 更新

Question

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

http://i.imgur.com/ys8mnbV.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>';
    }
} 

      ?>

Answer 1

使用 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);
}

?>

Javascript

$(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('');
        });

      });

   });
});