javascript - 当列表后面有内容时，自动建议 Ajax 不会链接

Question

所以我有一个有效的 ajax/jquery 下拉列表/列表，它根据用户输入填充数据库中的结果。

基本上是填充 <li>对于数据库中的每个结果，并将其放入一个链接，然后可以转到该人的个人资料页面。

我已经测试了代码，它在测试页面上运行得很好，但是一旦它后面有其他内容，链接就不再起作用了。我该如何解决这个问题？

这是代码:

自定义.js:

/* JS File */

// 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').html(query_value);
    if(query_value !== ''){
        $.ajax({
            type: "POST",
            url: "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));
    };
});

});

search.php(搜索的文件，而不是向用户显示的页面):

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

// Define Output HTML Formating
$html = '';
$html .= '<li class="result">';
$html .= '<a target="_blank" href="urlString">';
$html .= '<h3>nameString</h3>';
$html .= '<h4>functionString</h4>';
$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 users WHERE username LIKE "%'.$search_string.'%" OR name LIKE "%'.$search_string.'%"';

// 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['function']);
        $display_name = preg_replace("/".$search_string."/i", "<b class='highlight'>".$search_string."</b>", $result['name'] . " " . $result['surname'] . " (" . $result['username'] . ")");
        $display_url = 'timeline.php?user='.$result['username'];

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

        // Insert Function
        $output = str_replace('functionString', $display_function,     $output);

        // Insert URL
        $output = str_replace('urlString', $display_url, $output);

        // Output
        echo($output);
    }
}else{

    // Format No Results Output
    $output = str_replace('urlString', 'javascript:void(0);', $html);
    $output = str_replace('nameString', '<b>No Results Found.</b>', $output);
    $output = str_replace('functionString', 'Sorry :(', $output);

    // Output
    echo($output);
}
}

以及搜索表单本身:

<!-- Main Input -->
<input type="text" id="search" autocomplete="off">

<!-- Show Results -->
<h4 id="results-text">Showing results for: <b id="search-string">Array</b></h4>
<ul id="results"></ul>

所有这些代码都可以在这里找到:live search with ajax, php and mysql 归功于他。

感谢您提前提供的帮助!

Answer 1

多亏了 Enijar，我才让它正常工作。

将定位设置为绝对，并将 z 索引设置为 99。