在textarea中自动完成多个结果

时间:2013-06-17 16:58:23

标签: php jquery html

我认为这很简单。我从PHP while循环中获取的数组中获取了一些结果。

问题是它只允许1个结果。当我搜索另一个字符串时,它将替换旧字符串。

我试图自己想出一个解决方案,但我认为我的大脑已经烧坏了,我似乎无法找到一个合适的解决方案。

所以,这是脚本:

<script type="text/javascript">
    function lookup(inputString) {
        if(inputString.length == 0) {
            $('#suggestions').hide();
        } else {
            $.post("ajax-search.php", {queryString: ""+inputString+""}, function(data){
                if(data.length >0) {
                    $('#suggestions').show();
                    $('#autoSuggestionsList').html(data);
                }
            });
        }
    } // lookup

    function fill(thisValue) {
        $('#inputString').val(thisValue);
        setTimeout("$('#suggestions').hide();", 200);
    }
</script>

这是HTML:

               <form>
                <textarea cols="80" rows="2" id="faq_search_input" name="query" dir="rtl" disabled></textarea>
                <textarea id="inputString" onkeyup="lookup(this.value);" onblur="fill();" cols="80" rows="2" placeholder="Write here"></textarea>
                <div class="suggestionsBox" id="suggestions" style="display: none;">
                    <img src="images/upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
                    <div class="suggestionList" id="autoSuggestionsList">
                        &nbsp;
                    </div>
                </div>
            </form>

这是PHP:

<?php 
include("config.inc"); //Including our DB Connection file

if(isset($_POST['queryString'])) {
    $queryString = $db->real_escape_string($_POST['queryString']);
        if(strlen($queryString) > 0) {
            $query = $db->query("SELECT * FROM directions WHERE eng_dir LIKE '%$keyword%' OR attr LIKE '%$keyword%'");

            if($query) {
                while ($result = $query ->fetch_object()) {             
                    echo '<li value="'.$result->dir_id.'" onClick="fill(\''.$result->eng_dir.'\');">'.$result->eng_dir.'</li>';
                }
            }
        }
}
?>

我尝试使用MySQL的preg方法,但我认为我做错了。问题是,我可以很容易地通过jQuery做到这一点,但由于我想使用MySQL的元素数量。正因为如此,我现在被困在一块岩石和一块坚硬的地方之间。

即使是朝着正确方向的简单推动也是可以的。我知道我必须错过一些明显的东西。

1 个答案:

答案 0 :(得分:4)

据我了解,我认为您必须在每次搜索时使用.appendTo()附加结果,而不是使用html(),因为html()会将目标ID /类上的所有数据替换为新之一。

$.post("ajax-search.php", {queryString: ""+inputString+""}, function(data){
            if(data.length >0) {
                $('#suggestions').show();
                $(data).appendTo('#autoSuggestionsList');
            }
        });