【问题标题】:Autocomplete dynamic search SQL database from PHP从 PHP 自动完成动态搜索 SQL 数据库
【发布时间】:2016-08-09 19:04:14
【问题描述】:

我有一个搜索框,通过数据库进行搜索。在我的代码中,搜索在一个输入框中完成,并显示动态搜索输出在它下面的文本区域中。

我想要的是一个像谷歌这样的搜索,当用户键入时,它应该显示来自 db 表的类似项目。

例如,如果我有两个名为“Dummy 1”和“Dummy 2”的组织并且用户输入“du”,搜索栏应该显示 2 个结果,并且用户应该能够选择一个。

我的代码是:

<form action="newbrand.php" method="post">
    <br>
    Brand Name: <input type="text" name="bname" /><br><br>
    Search for an Organization: <input type="text" name="search" onkeyup="searchq()" id="output"><  
    Selected Organization:<textarea id="output"></textarea>
</form>

js是这样的:

<script type="text/javascript">
function searchq(){
    var searchTxt = $("input[name='search']").val();
    $.post("search.php", {searchVal: searchTxt},function(output){
        $("#output").html(output);
    }
}
</script>

这是 search.php 文件:

<?php
include 'db_connect.php';
$link = mysqli_connect($host, $username, $password, $db);
if(!link){
    echo "DB Connection error";
}
$output = '' ;
$output2 = '' ;
if (isset($_POST['searchVal'])){
$searchq = $_POST['searchVal'];
//$searchq = preg_replace("#[^0-9a-z]#i","",$searchq);
$query = mysqli_query($link, "SELECT * FROM `organisations_info` WHERE `Organisation_Name` LIKE '%$searchq%'")or die("Could not search!");
$count = mysqli_num_rows($query);
if($count == 0){
    $output = '<div>No results!</div>';
}else{
    while($row = mysqli_fetch_array($query)){
        $orgname = $row['Organisation_Name'];
        $orgid = $row['Organisation_Id'];
        $subs = $row['Subscription_Type'];
        //$output = echo "<option value='".$orgname."'>" . $orgname . "</option>";
        $output = $orgname; 
        $output2 = $orgid; 
        $output3 = $subs;
        //$output = '<div>'.$orgname.'</div>';
    }
}
}
echo ($output);
?>

我怎样才能做到这一点?

【问题讨论】:

  • 尝试使用jQuery自动完成jqueryui.com/autocomplete
  • @ShoaibAkhter,因为项目应该在availableTags 数组中列出(硬编码)。就我而言,这些项目是动态来自数据库的
  • 同一页还有更多示例,请在右侧菜单中查看REMOTE DATASOURCE示例jqueryui.com/autocomplete/#remote,这将允许您接收动态数据。

标签: javascript php jquery mysql dynamic


【解决方案1】:

在JS代码中...

<script type="text/javascript">
function searchq(){
    var searchTxt = $("input[name='search']").val();
    $.post("search.php", {searchVal: searchTxt},function(output){
        $("#output").html(output);
    }
}
</script>

你已经给了一个输入类型元素的 id(#output) 来显示(或返回)HTML 语句 并且 js 脚本也没有正确关闭(语法错误)。所以 有效的声明将是...

<form action="newbrand.php" method="post">
    <br>
    Brand Name: <input type="text" name="bname" /><br><br>
    Search for an Organization: <input type="text" name="search" onkeyup="searchq()" id="output"><  
    Selected Organization:<textarea id="output"></textarea>
</form>
<br>
<div id="mydiv"></div>

<script type="text/javascript">
    function searchq(){
        var searchTxt = $("input[name='search']").val();
        $.post("search.php", {searchVal: searchTxt},function(output){
        $("#mydiv").html(output);
    });
}
</script>

【讨论】:

    【解决方案2】:

    只需更改您的查询:

    $query = mysqli_query($link, "SELECT * FROM `organisations_info` WHERE `Organisation_Name` LIKE  '%".$searchq."%' ")or die("Could not search!");
    

    查询将正常工作:)

    然后在你的 search.php中输出HTML响应(相应地管理css):

    <?php
    include 'db_connect.php';
    $link = mysqli_connect($host, $username, $password, $db);
    if(!link){
        echo "DB Connection error";
    }
    $output = '' ;
    $output2 = '' ;
    if (isset($_POST['searchVal'])){
    $searchq = $_POST['searchVal'];
    //$searchq = preg_replace("#[^0-9a-z]#i","",$searchq);
    $query = mysqli_query($link, "SELECT * FROM `organisations_info` WHERE `Organisation_Name` LIKE  '%".$searchq."%' ")or die("Could not search!");
    
    $count = mysqli_num_rows($query);
    if($count == 0){
        $output = '<div>No results!</div>';
    }else{
        while($row = mysqli_fetch_array($query)){
            $orgname = $row['Organisation_Name'];
            $orgid = $row['Organisation_Id'];
            $subs = $row['Subscription_Type'];
        ?>
            <div><?php echo $orgname; ?></div>';
            <div><?php echo $orgid ; ?></div>';
            <div><?php echo $subs ; ?></div>';
       <?php
        } // while
    } // else
    } // main if
    ?>
    

    我希望这是你需要的!!

    【讨论】:

    • 从您的代码中,它在单独的&lt;p&gt; 中列出了这两个项目会发生什么。我希望它显示在它自己的搜索框中,就像它发生在谷歌中一样。并且用户应该能够选择其中之一
    • @YohanBlake,我在我的问题中删除了&lt;p&gt;,那怎么可能。而且你需要相应地管理html。我刚刚为你写了php代码
    • 是的,我的意思是,您对 search.php 文件进行了更改。回声转到主页,就像我的问题一样,它显示在文本区域中。我希望结果显示在同一个输入框中,例如 google 搜索栏(自动完成)
    • 您可以尝试将结果 div 替换为具有相同 id 的输入类型 @YohanBlake
    • 所以我尝试的是,我在主文件中添加了一个选择框,并在 &lt;option&gt; 标签内回显了 search.php 的结果。现在结果正确显示在选择框中。但我想要做的是将这些结果添加到用户正在输入的同一个输入框中。你知道怎么做吗?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-09-09
    • 2015-02-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-02-11
    相关资源
    最近更新 更多