JQuery用户界面自动完成使用JSON和Ajax [英] JQuery UI autocomplete with json and ajax

问题描述

我已经看到了很多的处理通过JSON传递一个数组标签和值属性的问题，但不是很多关于字符串传递。我的问题是，我似乎无法让我的自动完成填写。我跑了转储功能，我得到通过JSON传递给自动完成这些样本值：

I've seen a lot of questions dealing with passing an array with label and value properties via JSON, but not much about passing strings. My problem is that I cannot seem to get my autocomplete to fill. I ran a dump function and am getting these sample values passed via JSON to the autocomplete:

0: 23456
1: 21111
2: 25698

下面是一些code：

$("#auto_id").autocomplete( {
    source: function(request,response) {

        $.ajax ( {
          url: "fill_id.php",
          data: {term: request.term},
          dataType: "json",
          success: function(data) {
            //what goes here?
                 } 
    }) }
   });

下面是fill_id.php：

Here is fill_id.php:

$param = $_GET['term'];
$options = array();


$db = new SQLite3('database/main.db');
    $results = $db->query("SELECT distinct(turninId) FROM main WHERE turninid LIKE '".$param."%'");


while ($row_id = $results->fetchArray()) {
        $options[] =  $row_id['turninId']; 
    }   
echo json_encode($options);

我的自动完成保持空白。如何更改我的JSON数组来填补呢？还是什么我在阿贾克斯成功的功能包括哪些？

My autocomplete remains blank. How do I change my JSON array to fill it? Or what do I include in my ajax success function?

推荐答案

您可以坚持很符合jQuery的用户界面的自动完成的远程演示：<一href="http://jqueryui.com/resources/demos/autocomplete/remote-jsonp.html">http://jqueryui.com/resources/demos/autocomplete/remote-jsonp.html

You can stick very much to the remote demo of jQuery UI's Autocomplete: http://jqueryui.com/resources/demos/autocomplete/remote-jsonp.html

要得到你的成绩进入自动完成列表中，你需要把带有标志的对象和值的响应参数（这实际上是一个函数），你的ajax成功函数中：

To get your results into the autocompleted list, you need to put a object with a label and a value to the response parameter (which is actually a function) inside your ajax success function:

source: function( request, response ) {
    $.ajax({
        url: "fill_id.php",
        data: {term: request.term},
        dataType: "json",
        success: function( data ) {
            response( $.map( data.myData, function( item ) {
                return {
                    label: item.title,
                    value: item.turninId
                }
            }));
        }
    });
}

但这只会如果修改尤尔fill_id.php了一下工作：

But this will only work if you modify yor fill_id.php a bit:

// escape your parameters to prevent sql injection
$param   = mysql_real_escape_string($_GET['term']);
$options = array();

// fetch a title for a better user experience maybe..
$db = new SQLite3('database/main.db');
    $results = $db->query("SELECT distinct(turninId), title FROM main WHERE turninid LIKE '".$param."%'");

while ($row_id = $results->fetchArray()) {
    // more structure in data allows an easier processing
    $options['myData'][] = array(
        'turninId' => $row_id['turninId'],
        'title'    => $row_id['title']
    ); 
}

// modify your http header to json, to help browsers to naturally handle your response with
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');

echo json_encode($options);

当然，当你没有在表中标题或任何东西，你也可以只留下你的反应，因为它是在你成功的回调重复的ID。重要的是，你填写你的响应的功能与价值/项目对自动完成：

Of course, when you don't have a title or anything in your table, you can also just leave your response as it is and repeat the id in your success callback. Important is, that you fill your response function in the autocomplete with a value/item pair:

// this will probably work without modifying your php file at all:
response( $.map( data, function( item ) {
    return {
        label: item,
        value: item
    }
}));

编辑： 更新的引用链接到新的jQuery UI的自动完成界面

edit: updated the reference link to the new jquery UI's autocomplete ui

这篇关于JQuery用户界面自动完成使用JSON和Ajax的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！