【问题标题】:Retrieving data with PHP and Json into an autocomplete. Problems with jQuery UI 1.8.2+使用 PHP 和 Json 将数据检索到自动完成中。 jQuery UI 1.8.2+ 的问题
【发布时间】:2011-12-10 21:14:06
【问题描述】:

我制作了一个电影自动完成功能,您可以在其中输入一个字母,它会为您提供电影的建议列表。在每部电影旁边,我还添加了电影的发行日期。

这就是我在 PHP 中解析它的方式:

$tmdb = new TMDb($api_key);
$json = json_decode($tmdb->searchMovie($_GET['term']));
$response = array();
$i=0;
foreach($json as $movie){
    if($i >= 6) break;
    $response[$i]['value'] = $movie->name;
    $response[$i]['label'] = $movie->name . ' <span class="m_rel">(' . date('Y',strtotime($movie->released)).')</span>';

    $i++;
}
echo json_encode($response);

现在,如果我使用 jQuery 1.8.2,一切都会完美运行。

我得到这个结果:

如果我使用更高版本的 jQuery UI,我会得到:

html 很简单,它只是一个表单,而自动完成则是来自 jQuery 的表单,所以没什么特别的。一旦我更改了 UI 的版本,就会出现问题。

有人可以帮我解决这个问题吗?我不能使用 jQuery 1.8.2,因为我遇到了可拖动和 IE(所有版本)的其他问题,因为它是一个已知的错误,所以无法解决。

Andrew 的 Whitaker 回答后我的 JS:

var movieName = $('#movieName');
movieName.autocomplete({
    source: 'movieInfo.php',
    select: function (event, ui) {
        $(this).val(ui.item.imdbid);
        $(".re5").submit()
    }
})._renderItem = function(ul, item) {
    return $("<li></li>")
        .data("item.autocomplete", item)
        .append("<a>" + item.label + "<span class='m_rel'>" + item.releasedate + "</span></a>")
        .appendTo(ul);
};

're5' 是表单的类。

非常感谢

【问题讨论】:

  • 问题应该出在你的 js html 代码中,不要也添加那个代码,

标签: php jquery jquery-ui autocomplete jquery-ui-autocomplete


【解决方案1】:

使用自动完成覆盖菜单项外观的首选方法是替换默认的_renderItem 方法,如example 所示。

所以我会做两件事:

  1. 修改您的 PHP 以不在结果中返回标记:

    $tmdb = new TMDb($api_key);
    $json = json_decode($tmdb->searchMovie($_GET['term']));
    $response = array();
    $i=0;
    foreach($json as $movie){
        if($i >= 6) break;
        $response[$i]['value'] = $movie->name;
        $response[$i]['label'] = $movie->name;
        $response[$i]['releasedate'] = $movie->released;
    
        $i++;
    }
    echo json_encode($response);
    
  2. 覆盖_renderItem 方法以在span 中显示发布日期:

    $("#selector").autocomplete({ /* options */ })
        .data( "autocomplete" )._renderItem = function(ul, item) {
            return $("<li></li>")
                .data("item.autocomplete", item)
                .append("<a>" + item.label + " <span class='m_rel'>(" + item.releasedate + ")</span></a>")
                .appendTo(ul);
        };
    

抱歉,PHP 有点不对劲;我不是那里的专家。

【讨论】:

  • 你好,安德鲁!我希望我能得到你的答复。请注意,这是我在 javascript 中使用的:stackoverflow.com/questions/7745577/…。我给你的答案。我仍然使用那个 IMDbID。所以我当前的 javascript 是(检查我上面的编辑),它不显示日期。非常感谢
  • @jQuerybeast:嗯,你应该可以将上面的 PHP 与上一个答案中的 PHP 结合起来......你具体有什么问题?
  • 不,php 还是一样的。除了额外的一行 $response[$i]['imdbid'] = $movie->imdb_id;最后提交表格的IMDb ID。我没有收到任何错误,只是没有显示日期。
  • 您能否将以下内容添加到您的select 处理程序中,看看它是否正确发出警报? alert(ui.item.releasedate);
  • 它会提醒整个日期。例如 1999-07-01
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-11-16
  • 2017-06-19
  • 2011-08-11
  • 1970-01-01
相关资源
最近更新 更多