jquery-ui-1.8.14使用php和mysql自动完成

时间:2011-09-16 22:14:21

标签: php mysql jquery-ui jquery-autocomplete

我对js和编程并不是很了解,但是我非常坚持一些真的不应该太难的东西。随意访问测试页面:

[删除链接]

我有三个自动填充字段:当前的俱乐部,国家和职业统计数据。 自动填充功能完美适用于职业统计数据,我还可以添加字段,自动填充也适用于添加的字段。

但对于当前的俱乐部和国家/地区,我在输入时会得到结果但是当我点击正确的输出时它不会显示在输入字段中。

我可以使用其他js-library工作,但是它不再适用于添加按钮职业统计数据字段。

我使用以下库:

<script  type="text/javascript" src="js/jquery-1.6.3.js"></script>
<script  type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
<script  type="text/javascript" src="js/jq-ac-script.js"></script>

目前的俱乐部html看起来像:

<p>
    Current club <label>:</label>
    <input type="text" id="currentclub" />
</p>

在定制的jq-ac-script.js中(我最初在网上找到了这个 - 不记得在哪里)重要部分是:

$(document).ready(function(){
    $( "#currentclub" ).autocomplete({
        source: "get_club_list.php",
        minLength: 1    
    })
    .data( "autocomplete" )._renderItem = function( ul, item ) {
       return $( "<li></li>" )
       .data( "item.autocomplete", item )
       .append( item.currentclub )
       .appendTo( ul );
    };
});

“get_club_list.php”如下所示:

<?php
include ("dbsetup.php");

$return_arr = array();
$param = $_GET["term"];

$fetch = mysql_query("SELECT * FROM FootNews_CLUB 
    WHERE clubShortName LIKE '%$param%'");

/* Retrieve and store in array the results of the query.*/
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {

    $row_array['currentclub']           = $row['clubShortName'];
    array_push( $return_arr, $row_array );
}

/* Free connection resources. */
mysql_close($conn);

/* Toss back results as json encoded array. */
echo json_encode($return_arr);

?>

任何想法,而选择的俱乐部为什么没有出现,当我点击它将是appriciated !!

1 个答案:

答案 0 :(得分:1)

哇,用过我的PHP代码。很酷,很高兴我可以帮忙。 http://www.jensbits.com/2010/03/29/jquery-ui-autocomplete-widget-with-php-and-mysql/

不确定为什么要使用包含_renderItem的自动填充代码。我认为你不需要它。

将php代码更改为:

while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {

    $row_array['currentclub']  = $row['clubShortName'];
    $row_array['value']   = $row['clubShortName'];
    array_push( $return_arr, $row_array );
}

而且,jquery:

$( "#currentclub" ).autocomplete({
    source: "get_club_list.php",
    minLength: 1    
});

您可以再次阅读我的教程,但自动填充功能需要返回labelvalue字段。然后,它使用该值填充选择列表和相应的输入字段。

我离开了$row_array['currentclub'] = $row['clubShortName'];,因为我不知道你以后是不是要抓住它。如果你不是,你也不需要那条线。

由于你控制了返回的数据,并且可以在php中指定label和/或value字段,我不明白为什么你使用_renderItem来表示任何一个自动完成。

顺便说一句,你应该在你的php代码中添加mysql_real_escape_string以获得一些sql注入保护:http://www.php.net/manual/en/function.mysql-real-escape-string.php