使用php(codeigniter)和数据库的JQuery ui自动完成

时间:2011-04-01 11:14:54

标签: php jquery-ui

我有这个ac.php文件和这个result.php文件 我想在ac.php文件中使用JQuery UI中的自动完成,但我希望它从result.php中检索数据作为源。我只是不知道该怎么做。我试过这种方式,但它不起作用

ac.php

<html>
<head>
    <link type="text/css" href="jqui/css/ui-lightness/jquery-ui-1.8.11.custom.css" rel="stylesheet" />  
    <script type="text/javascript" src="jqui/js/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="jqui/js/jquery-ui-1.8.11.custom.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
        $("#tags").autocomplete("result.php");
    });

  </script>
</head>
<body>

<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags">
</div>

</body>
</html>

这是 result.php

<?php
$arrResults = array('option 1', 'option 2', 'option 3');

// Print them out, one per line
echo implode("\n", $arrResults); 

?>

2 个答案:

答案 0 :(得分:3)

引用documentation of Autocomplete

  

Autocomplete插件需要这样   string指向一个URL资源   将返回 JSON数据


因此,您应该使用以下内容代替您的代码:

<?php
$arrResults = array('option 1', 'option 2', 'option 3');
echo json_encode($arrResults);
?>


json_encode()函数将返回与您的数组对应的JSON字符串。

答案 1 :(得分:1)

<强> ac.php

$(function() {
    $( "#tags" ).autocomplete({
        source: "result.php",
        dataType:'json',
        minLength: 0,
        delay:0

    });

    $( "#tags" ).click(function() {
        $( "#tags" ).autocomplete("search","");
    });
});

<强> result.php

<?php
$arrResults = array('option 1', 'option 2', 'option 3');

// Print them out, one per line
echo json_encode($arrResults);
?>