最受欢迎

AJAX实时搜索未返回结果

AJAX live search not returning results

本文关键字：返回 结果 搜索 实时 AJAX | 更新日期: 2023-09-27

我已经尝试设置这个AJAX实时搜索有一段时间了，但无法让它工作。

它正在连接到服务器（我希望），因为我没有收到任何错误告诉我这一点，但现在我什么都没有得到。

这是我正在使用的php。我认为问题就在这里，但我看不出来。我猜这与我如何命名表中的字段有关？

<?php
/************************************************
    The Search PHP File
************************************************/

/************************************************
    MySQL Connect
************************************************/
// Credentials
$dbhost = "localhost";
$dbname = "zackreid_test2";
$dbuser = "zackreid_test";
$dbpass = "test2";
//  Connection
global $tutorial_db;
$tutorial_db = new mysqli();
$tutorial_db->connect($dbhost, $dbuser, $dbpass, $dbname);
$tutorial_db->set_charset("utf8");
//  Check Connection
if ($tutorial_db->connect_errno) {
    printf("Connect failed: %s'n", $tutorial_db->connect_error);
    exit();
}
/************************************************
    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 search WHERE function 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']);
            $display_url = 'http://php.net/manual-lookup.php?pattern='.urlencode($result['function']).'&lang=en';
            // 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);
    }
}

?>

这是html，以备不时之需；

<!DOCTYPE HTML>
<html>
<head>
    <!-- Meta -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Live Search Tutorial</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <!-- Load CSS -->
    <link href="style/style.css" rel="stylesheet" type="text/css" />
    <!-- Load Fonts -->
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:regular,bold" type="text/css" />
    <!-- Load jQuery library -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <!-- Load custom js -->
    <script type="text/javascript" src="scripts/custom.js"></script>
</head>
<body>
    <div id="main">
        <!-- Main Title -->
                <h1 class="title">Periodic Tabel Search</h1>
        <h5 class="title">A simple why to find the element you are looking for</h5>
        <!-- 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>

    </div>
</body>
</html>

这里还有一个测试版本，我现在有

http://dev.zackreid.com/test/download/Code/index.html

哦，是的，列的名称是id、function和name。在浏览php文件时，我以为这些文件被引用了？

编辑

只是添加了JavaScript；

/* 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').text(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));
        };
    });
});

第2版

我已经意识到，当我在搜索栏中输入值时，会发生错误。我一直得到这个；

POST http://dev.zackreid.com/test/download/Code/search.php 500 (Internal Server Error)
send @ jquery.min.js:4
f.extend.ajax @ jquery.min.js:4
search @ custom.js:17
jquery.min.js:4

所以这意味着php文件中有问题？是哪个导致与jquery的连接失败？

我用if包装了您的while循环，然后它对我有效。

if ($result) {
    while($results = $result->fetch_array()) {
        $result_array[] = $results;
    }
}

否则，即使$result是布尔值，fetch_array()也始终在运行。

<?php
/************************************************
    The Search PHP File
************************************************/

/************************************************
    MySQL Connect
************************************************/
// Credentials
$dbhost = "localhost";
$dbname = "test";
$dbuser = "root";
$dbpass = "123456";
//  Connection
global $tutorial_db;
$tutorial_db = new mysqli();
$tutorial_db->connect($dbhost, $dbuser, $dbpass, $dbname);
$tutorial_db->set_charset("utf8");
//  Check Connection
if ($tutorial_db->connect_errno) {
    printf("Connect failed: %s'n", $tutorial_db->connect_error);
    exit();
}
/************************************************
    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]/", " ", $_REQUEST['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 search WHERE function LIKE "%'.$search_string.'%" OR name LIKE "%'.$search_string.'%"';
    // Do Search
    $result = $tutorial_db->query($query);
    // while($results = $result->fetch_array()) {
    if ($result) {
        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']);
            $display_url = 'http://php.net/manual-lookup.php?pattern='.urlencode($result['function']).'&lang=en';
            // 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);
    }
}

?>

调用的URL:http://localhost/test/so_q.php?query=h

MySQL

mysql> desc search;
+----------+--------------+------+-----+---------+-------+
| Field    | Type         | Null | Key | Default | Extra |
+----------+--------------+------+-----+---------+-------+
| function | varchar(200) | YES  |     | NULL    |       |
| name     | varchar(50)  | YES  |     | NULL    |       |
+----------+--------------+------+-----+---------+-------+
2 rows in set (0.01 sec)

数据

mysql> select * from search;
+----------+------+
| function | name |
+----------+------+
| h        | john |
| asdf     | john |
| hey      | Dakz |
| ado      | Sira |
+----------+------+
4 rows in set (0.00 sec)
相关文章：
最新更新
www.56WenDa.com 2012-2023 | php问答网 | php学习