使用 json 和 ajax 自动完成 JQuery UI [英] 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

这是一些代码:

$("#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 数组以填充它?或者我在我的 ajax 成功函数中包含什么?

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 UI 的自动完成的远程演示: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.重要的是，您在自动完成功能中使用值/项目对填充 response 函数:

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 的自动完成 ui 的参考链接

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

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