如何使用两个不同的查询创建自动完成?

时间:2017-05-30 12:17:59

标签: php jquery mysqli

代码:

<input type="text" name="college_name" id="college_name" placeholder="Search By College Name">
<div id="box"></div>
<script>
    $(document).ready(function() {
        $("#college_name").keyup(function() {
            $.ajax({
                type: "POST",
                url: "autocomplete.php",
                data: 'keyword=' + $(this).val(),
                success: function(data) {
                    $("#box").show();
                    $("#box").html(data);
                }
            });
        });
    });

    function selectCollege(val) {
        $("#college_name").val(val);
        college_name = $("#college_name").val();
        location.href = "college.php?college_name=" + college_name;
        $("#box").hide();
    }

    function selectCountry(val) {
        $("#college_name").val(val);
        university_name = $("#college_name").val();
        location.href = "university.php?university_name=" + university_name;
        $("#box").hide();
    }
</script>

autocomplete.php

<?php
    require_once("dbcontroller.php");
    $db_handle = new DBController();
    if(!empty($_POST['keyword'])) 
    {
        $query ="SELECT college_name,field FROM college where short_name like '%".$_POST['keyword']."%' or college_name like '%".$_POST['keyword']."%' ORDER BY CASE WHEN short_name LIKE '%".$_POST['keyword']."%' THEN 1 ELSE 2 END limit 100";
        $result = $db_handle->runQuery($query);
        if(!empty($result)) 
        {
?>
    <ul>
    <a href="#" style="color:#fff;"><li onClick="selectCollege('<?php echo $college["college_name"]; ?>');"><?php echo $college["college_name"]; ?><?php echo $field; ?></li></a>
<?php 
        } 
?>
    </ul>

<?php
    $query ="SELECT university_name,state,university_id FROM university where short_name like '%".$_POST['keyword']."%' or university_name like '%".$_POST['keyword']."%' ORDER BY CASE WHEN short_name LIKE '%".$_POST['keyword']."%' THEN 1 ELSE 2
    END limit 100";
    $result = $db_handle->runQuery($query);
    if(!empty($result)) 
    {
?>
    <ul>
    <a href="#" style="color:#fff;"><li id="univer-li" onClick="selectCountry('<?php echo $university["university_name"]; ?>');"><?php echo $university["university_name"]; ?><?php echo $state; ?></li></a>
<?php 
    } 
?>
    </ul>
<?php 
    }
?>

在此代码中,当我在输入字段中写入任何名称,即

<input type="text" name="college_name" id="college_name" placeholder="Search By College Name">

它显示的结果如enter image description here

在这里你可以看到它显示两个滚动条,但我想要单个滚动条。那么,我该如何解决这个问题?请帮助。

谢谢

1 个答案:

答案 0 :(得分:0)

two列表中包含scrolls的原因,因为您回显了两个<ul>标记。

您可以通过将所有query结果连接起来来组合所有<?php //@marylyn : Set 1st list $sHtmlCollegeTags = ''; require_once("dbcontroller.php"); $db_handle = new DBController(); if(!empty($_POST['keyword'])) { $query ="SELECT college_name,field FROM college where short_name like '%".$_POST['keyword']."%' or college_name like '%".$_POST['keyword']."%' ORDER BY CASE WHEN short_name LIKE '%".$_POST['keyword']."%' THEN 1 ELSE 2 END limit 100"; $result = $db_handle->runQuery($query); if(!empty($result)) { ?> $sHtmlCollegeTags .= <a href="#" style="color:#fff;"><li onClick="selectCollege('<?php echo $college["college_name"]; ?>');"><?php echo $college["college_name"]; ?><?php echo $field; ?></li></a> <?php } ?> </ul> <?php //@marylyn : Set 2nd list $sHtmlUnivTags = ''; $query ="SELECT university_name,state,university_id FROM university where short_name like '%".$_POST['keyword']."%' or university_name like '%".$_POST['keyword']."%' ORDER BY CASE WHEN short_name LIKE '%".$_POST['keyword']."%' THEN 1 ELSE 2 END limit 100"; $result = $db_handle->runQuery($query); if(!empty($result)) { ?> $sHtmlUnivTags .= <a href="#" style="color:#fff;"><li id="univer-li" onClick="selectCountry('<?php echo $university["university_name"]; ?>');"><?php echo $university["university_name"]; ?><?php echo $state; ?></li></a> <?php } ?> <?php } ?> <?php // @marylyn : Concatenate both $sHtmlCollegeTags and $sHtmlUnivTags echo '<ul>' . $sHtmlCollegeTags . $sHtmlUnivTags . '</ul>'; ?> 结果:

NSMutableArray