獲得價值 <li> 標記到TextField

Question

我正在從HTML頁的輸入文本中輸入的字符串從MySQL表中獲取搜索結果。

使用AJAX，當用戶選擇結果行之一時，瀏覽器將重定向到PHP文件。

我需要將結果放在同一頁面的另一個TextField上，而不要打開另一個頁面。

這是我現在擁有的代碼：

PHP部分發送所需的輸出結果：

/************************************************
    Search Functionality
************************************************/

// Define Output HTML Formating
$html = '';

$html .= '<li class="result" >';
$html .= '<img src="iconos_especialidades/logo"  width="94" height="94"  />';
$html .= '<a target="_blank" href="urlString" >';
$html .= '   '.'<h3>nameString</h3>';
$html .= '</a>';
$html .= '</li>';

// Get Search
$search_string = preg_replace("/[^A-Za-z0-9]/", " ", $_POST['query']);
$search_string = $tutorial_db->real_escape_string($search_string);

// Check Length More Than One Character
if (strlen($search_string) >= 1 && $search_string !== ' ') {
    // Build Query
    $query = 'SELECT * FROM tb_especialidades WHERE especialidad LIKE "%'.$search_string.'%" OR especialidad LIKE "%'.$search_string.'%" ORDER BY especialidad';

    // Do Search
    $result = $tutorial_db->query($query);
    while($results = $result->fetch_array()) {
        $result_array[] = $results;
    }

    // Check If We Have Results
    if (isset($result_array)) {
        foreach ($result_array as $result) {

            // Format Output Strings And Hightlight Matches
            $display_function = preg_replace("/".$search_string."/i", "<b class='highlight'>".$search_string."</b>", $result['especialidad']);
            $display_name = preg_replace("/".$search_string."/i", "<b class='highlight'>".$search_string."</b>", $result['especialidad']);
            $display_url = 'opinar_doc_loc.php?id='.$result['id_especialidad'];

            if ($result['icono'] == ""){
            $display_logo = "nada.jpg";
            }
            else {
            $display_logo = $result['icono'] ;
            }

            // Insert Name
            $output = str_replace('nameString', $display_name, $html);



            // Insert URL
            $output = str_replace('urlString', $display_url, $output);
            // Insert LOGO
            $output = str_replace('logo', $display_logo, $output);
            // Output
            echo($output);
        }
    }else{

        // Format No Results Output
        $output = str_replace('urlString', 'javascript:void(0);', $html);
        $output = str_replace('nameString', '<b>No se ha encontrado la especialidad buscada.</b>', $output);
        $output = str_replace('functionString', 'Sorry :(', $output);
        // Insert LOGO
            $display_logo = "nada.jpg";
            $output = str_replace('logo', $display_logo, $output);

        // Output
        echo($output);
    }
}

這是JQuery / Ajax部分：

// Start Ready
$(document).ready(function() {  

    // Icon Click Focus
    $('div.icon').click(function(){
        $('input#search').focus();
    });

    // Live Search
    // On Search Submit and Get Results
    function search() {
        var query_value = $('input#search').val();
        $('b#search-string').text(query_value);
        if(query_value !== ''){
            $.ajax({
                type: "POST",
                url: "php/search.php",
                data: { query: query_value },
                cache: false,
                success: function(html){
                    $("ul#results").html(html);
                }
            });
        }return false;    
    }

    $("input#search").live("keyup", function(e) {
        // Set Timeout
        clearTimeout($.data(this, 'timer'));

        // Set Search String
        var search_string = $(this).val();

        // Do Search
        if (search_string == '') {
            $("ul#results").fadeOut();
            $('h4#results-text').fadeOut();
        }else{
            $("ul#results").fadeIn();
            $('h4#results-text').fadeIn();
            $(this).data('timer', setTimeout(search, 100));

        };
    });

});

如何將數據庫$ result ['id_especialidad']中所需的值放在HTML頁面的TextField上？

Answer 1

您可以通過返回一個具有多個鍵的json對象來實現此目的。 例如從php：

<?php
  $result = array('id' => $result['id_especialidad'], 'data' => $output);
  echo json_encode($result);
?>

然后可以從JS中解碼和處理為兩個單獨的數據：

$.ajax({
  type: "POST",
  url: "php/search.php",
  data: { query: query_value },
  cache: false,
  success: function(html){
    var response = $.parseJSON(html);
    $("#my_input_field").val(response.id);
    $("ul#results").html(response.data);
   }
 });

編輯-------

我已經從查詢結果中添加了正確的id字段（再次參見上文），您還需要編輯php文件的no results部分的輸出（在“ else”之后），以回顯json編碼的數組。 。 例如：

<?php
  $result = array('id' => 0, 'data' => $output);
  echo json_encode($result);
?>

Answer 2

您的問題有點令人困惑...

在結果列表（LI）中單擊后，您要將重定向頁面放置到文本字段中，而不是打開新頁面嗎？

如果是，則需要執行另一個ajax來獲取頁面內容，然后將其放入文本字​​段中。