jQuery 自动完成（远程） - 示例

Posted 2023-02-24

【中文标题】jQuery 自动完成（远程） - 示例

【英文标题】：jQuery Autocomplete (Remote) - example

【发布时间】：2011-08-19 19:39:24

【问题描述】：

我真的希望避免发布新问题，但我找不到一个包含调用页面和“搜索”页面的 jQuery Autocomplete Remote 功能的有效示例。 jQueryUI“Demos & Documentation”部分不包含“search.php”的源代码

我尝试了几十种组合，但这是我开始的：

<style>
    .ui-autocomplete-loading  background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; 
    </style>
    <script>
    $(function() 
        function log( message ) 
            $( "<div/>" ).text( message ).prependTo( "#log" );
            $( "#log" ).attr( "scrollTop", 0 );
        

        $( "#birds" ).autocomplete(
            source: "search.php",
            minLength: 1,
            select: function( event, ui ) 
                log( ui.item ?
                    "Selected: " + ui.item.value + " aka " + ui.item.id :
                    "Nothing selected, input was " + this.value );
            
        );
    );
    </script>



<div class="demo">

<div class="ui-widget">
    <label for="birds">Birds: </label>
    <input id="birds" />
</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
    Result:
    <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

</div>

和search.php：

    $conn = mysql_connect("localhost", "USERNAME", "PASSWORD");
    mysql_select_db("DATABASE", $conn);
    $q = strtolower($_GET["birds"]);

    $query = mysql_query("select FIELD from TABLE where FIELD like '%$q%'");
    while ($row = mysql_fetch_array($query)) 
    echo json_encode($row);

有没有人可以共享代码 sn-ps 来显示这个等式的两边？非常感谢您提供的任何帮助。

【问题讨论】：

你喜欢在 SQL 注入后清理吗？

alex，关于使用自动完成和防止 SQL 注入的方法有什么建议吗？

【参考方案1】：

下面是 search.php 的正确代码：

    $conn = mysql_connect("localhost", "USERNAME", "PASSWORD");
    mysql_select_db("DATABASE", $conn);
    $q = strtolower($_GET["term"]);

$return = array();
    $query = mysql_query("select FIELD from TABLE where FIELD like '%$q%'");
    while ($row = mysql_fetch_array($query)) 
    array_push($return,array('label'=>$row['FIELD'],'value'=>$row['FIELD']));

echo(json_encode($return));

一些关键点

jqueryui给出的示例调用页面中没有

term

这个词，但这是使用的Querystring名称 你必须创建一个值的数组，然后在返回之前进行json编码

我希望这对将来的一些人有所帮助！

【讨论】：

补充知识；您可以将“值”更改为“您的键”，但更改“标签”会破坏功能并返回未定义的标签。

【参考方案2】：

当您在谷歌上搜索“jQuery UI 自动完成教程”时，有几个较大的教程，我想其中的一些可能会有所帮助：http://www.google.com/search?q=jqueryUI+autocomplete+tutorial

【讨论】：

感谢 Pendo - 其中很多都是非常古老的，或者来自像我这样沮丧的开发人员正在寻找教程 :)

【参考方案3】：

这是我之前使用的自动完成功能的精简版。可能有一两个错误，因为我删掉了一些代码。

在服务器上：

    if(isset($_POST['queryString'])) 
    $queryString = $_POST['queryString'];
    $html = '';

    if(strlen($queryString) >1) 
        $names= explode(" ", $queryString ); 
        foreach ($names as &$value) 
            // step 1: first names
            $result= queryf("SELECT *, 
                    MATCH(productName, productTags, productCategory, productOneLine) 
                    AGAINST ('*$queryString*' IN BOOLEAN MODE) 
                    AS score FROM products
                    WHERE MATCH(productName, productTags, productCategory, productOneLine) 
                    AGAINST ('*$queryString*' IN BOOLEAN MODE)
                    AND productStatus='1'
                    ORDER BY score DESC
                    LIMIT 10") ;
            if($result) 
while ($row = mysql_fetch_array($result)) 
                            echo '<li onclick="location.href=\'/'.$row['productCategory'].'/'.$row['productSlug'].'/\';" style="cursor: pointer;"><a href="/'.$row['productCategory'].'/'.$row['productSlug'].'/">
                            <div class="resultImg"><img src="/image.php?width=24&height=24&image='.$row['productIcon'].'" /></div> 
                            <span class="productName">'.$row['productName'].'</span><br />
                            '.$row['productOneLine'].'</a></li>';
                        

                    
         else 
                    echo '
                <ul>
                    <li>
                    <div class="resultImg"><img src="/image.php?width=24&height=24&image=/images/icon_searching.gif" /></div> 
                    <span class="productName">Processing...</span><br />
                    Please keep typing while we process your code</li>
                </ul>';
                
        
     else 
        echo '
                <ul>
                    <li>
                    <div class="resultImg"><img src="/image.php?width=24&height=24&image=/images/icon_searching.gif" /></div> 
                    <span class="productName">Processing...</span><br />
                    Please keep typing while we process your code</li>
                </ul>';
    
 else 
    echo 'Nothing to see here.';

脚本：

function suggest(inputString)
    if(inputString.length == 0) 
        $('#suggestions').fadeOut();
     else 
    $('#country').addClass('load');
        $.post("/autosuggest.php", queryString: ""+inputString+"", function(data)
            if(data.length >0) 
                $('#suggestions').fadeIn();
                $('#suggestionsList').html(data);
                $('#country').removeClass('load');
            
        );
    

function fill(thisValue) 
    $('#country').val(thisValue);
    setTimeout("$('#suggestions').fadeOut();", 600);

在 XHTML 页面上：

<div id="bg_searchMain">
                        <form id="form" action="#">
                        <input type="text" style="float:left; display:inline; width:430px; margin:5px 0 0 5px; background:none; border:none;" value="" id="country" onkeyup="suggest(this.value);" onblur="fill();" autocomplete="off" />
                        <!--<img src="images/button_search.gif"  id="button_search" />-->
                        <div class="suggestionsBox" id="suggestions" style="display: none;">
                            <div class="suggestionList" id="suggestionsList"> &nbsp; </div>
                        </div>

                        </form>
                    </div>

关于“接受率”的cmets是不必要的，发布这个对谷歌比对声誉更有用。

【讨论】：

谢谢 DeLonge - 我会看看测试一下。您使用的是 POST 吗？很有趣。

是的，在我熟悉 JSON 之前就把它放在了一起。我所有的新 AJAX 调用都是 JSON。如果您有一个广泛的项目，我建议使用 JSON。但是，POST 会很好。我的建议是还解析您的 POST 变量以进行安全性和 SQL 注入。该 queryf() 函数是一个自定义函数，可以做到这一点。

我认为您的 sn-p 可能缺少课程 - 您是否有机会包含这些课程？

【参考方案4】：

我做了php之类的，它成功了，我使用的是mysqli方法。

    $q = strtolower($_GET["term"]);

    $return = array();
    $query = "select name from students where name like '%$q%'";
    $result=$conn->query($query);
            while ($cresult=$result->fetch_row())array_push($return,array('label'=>$cresult[0],'value'=>$cresult[0]));
    
    echo(json_encode($return));

?>