2

我正在尝试设置一个从 csv 获取数据的自动完成功能。csv 有一个餐厅名称和食物类型的列表。我已经浏览了 SO 的其他一些帖子和自动完成文档，但我认为是 csv 中的两个字段，而不是一个字段让我感到困惑。

示例 csv 数据：

McDonald's,Fast Food
Olive Garden,Italian
Manny's,Steakhouse
Carino's,Italian
etc...

用户应该能够按食物类型或餐厅名称进行搜索：

<body>
    <br>
    <br>
    <label id="lblSearchRestaurant" for="txtSearchRestaurant">Search for a Restaurant</label>
    <input type="text" id="txtSearchRestaurant">
</body>

这是我为自动完成设置所做的尝试：

$(function() {
    $( "#txtSearchRestaurant" ).autocomplete({
        source:searchRestaurant.php,
        select: function( event, ui ) {
            $( "#search" ).val( ui.item.label + " / " + ui.item.actor );
            return false;
        }
    }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li>" )
        .data( "item.autocomplete", item )
        .append( "<a><strong>" + item.label + "</strong> / " + item.actor + "</a>" )
        .appendTo( ul );
    };
});

我需要使用 PHP 脚本提供数据。这是我目前所拥有的：

<?php
$header = NULL;
$restaurants = array();

if (($file = fopen('restaurants.csv', 'r')) !== FALSE) {
    while (($row = fgetcsv($file, 1000, ',')) !== FALSE) {
        if(!$header)
            $header = $row;
        else
            $data[] = array_combine($header, $row);
    }
    fclose($file);
}

$term = $_GET['term']; 

foreach($restaurants as $k=>$v) { 
    if(preg_match("/^$term/i", $v)) { $return[] = $v; } 
}
foreach($restaurants as $k => $v) { 
    if(preg_match("/$term/i", $v)) { $return[] = $v; } 
} 
echo json_encode(array_values(array_unique($return)));

以上都没有奏效，所以我尝试将餐厅数据格式化为一个数组，而不仅仅是逗号分隔的值：

[
{name:"McDonald's",type:"Fast Food"},
{name:"Olive Garden",type:"Italian"},
{name:"Manny's",type:"Steakhouse"},
{name:"Carino's",type:"Italian"}
];

<script>我在标签和单独的文件中本地尝试过，但都没有奏效。

所以，上述方法都不适合我，但我在数组方面还不是最好的，就此而言，使用 JSON 数据，所以我可能没有正确设置 php 脚本。

如果有人能在这里指出我正确的方向，我将不胜感激。

谢谢。

注意潜在答案： jquery UI 自动完成、传入数据的格式（如上所述）以及使用 PHP 从 csv 获取数据到自动完成都是对此的要求。不幸的是，这三个规定不受我控制。

4

4 回答 4

1

这是一个 jsfiddle，我希望它可以满足您的需求：http: //jsfiddle.net/L8L6k/

javascript 在顶部有一个变量“数据”，您需要使用 PHP 填充您的数据（我相信您说过您可以这样做。）

然后将该数据组合成两个变量：

var autocomp = new Array();
var hash = new Array();
for (var i=0; i < data.length; i++)
{
    autocomp[i] = data[i].name + ' ' + data[i].type;
    hash[autocomp[i]] = data[i];
}

1) 一个简单的数组，autocomp，它只是两个值的串联，名称和类型。这将作为源传递给 JQuery UI 自动完成。这种方式自动完成将搜索您的“项目”和“类型”。

2) 一个关联数组，散列，它将数据对象与级联值关联起来。

select 函数和 renderItem 函数都使用这个哈希来获取原始数据对象：

$( "#txtSearchRestaurant" ).autocomplete({
    source:autocomp,
    select: function( event, ui ) {
        var d = hash[ui.item.label];
        $( "#txtSearchRestaurant" ).val( d.name + " / " + d.type );
        return false;
    }
}).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
    var d = hash[item.label];
     return $( "<li>" )
    .data( "item.autocomplete", d )
    .append( "<a><strong>" + d.name + "</strong> / " + d.type + "</a>" )
    .appendTo( ul );
};
于 2013-06-05T23:48:21.690 回答
0

我认为返回数组中的键应该是“标签”和“值”。

也许你可以替换：

$data[] = array_combine($header, $row);

经过

if (preg_match("/^$term|$term/i", $row)) 
    $return[] = array('label'=>$header,'value'=>$row);

所以它变成（未经测试）：

<?php
$header = NULL;
$return = array();
$term   = $_GET['term']; 

if (($file = fopen('restaurants.csv', 'r')) !== FALSE) {
    while (($row = fgetcsv($file, 1000, ',')) !== FALSE) {
        if(!$header)
            $header = $row;
        else
            if (preg_match("/^$term|$term/i", $row)) 
                $return[] = array('label'=>$header,'value'=>$row);
    }

fclose($file);
}

echo json_encode(array_values(array_unique($return)));
?>
于 2013-06-07T08:15:25.413 回答
0

假设您从 php 返回数组（与您在问题中提到的格式相同）。然后将此添加到您的<script>：

function both(Restaurant) {
    return Restaurant.name + ',' + Restaurant.type ; 
}
$( "#txtSearchRestaurant" ).autocomplete({
    source: 
    function( request, response ) {
        $.getJSON( "/searchRestaurant.php", function(data) {
            response(data.map(both));
        });
    }
});

或者，如果您需要 PHP 和 javascript 方面的帮助，首先尝试发送由餐厅名称和类型组成的数组作为单个字符串元素，如下所示：

[
"McDonald's,Fast Food",
"Olive Garden,Italian",
"Manny's,Steakhouse",
"Carino's,Italian"
]

在 PHPsearchRestaurant.php中，您可以执行以下操作以快速获取上述格式：

$lines = file('restaurants.csv', FILE_IGNORE_NEW_LINES);
echo json_encode($lines);

在<script>添加：

$( "#txtSearchRestaurant" ).autocomplete({
    source: 
    function( request, response ) {
        $.getJSON( "/searchRestaurant.php", response);
    }
});
于 2013-06-01T20:07:43.370 回答
0

我对 PHP 不太熟悉，但这通常看起来你对这些概念不清楚。读者注意：缺乏回应通常表明问题的表述不明确。

如果我错了，请纠正我，但这是我从您的描述中理解问题的方式：

  1. 您有一个 <restaurant>,<cuisine> 对的 CSV。
  2. 您在网页上有一个多功能框，用户可以在其中输入餐厅或美食。
  3. 您希望多功能框根据 CSV 自动完成。
  4. 您想使用 jQuery 自动完成小部件来帮助解决这个问题。

您提供的代码讲述了一个不同的故事。PHP 代码似乎什么也没做。它将文件中的大量数据填充到 adata[]中，然后什么也不做。我不知道该功能会产生什么。

除此之外，您呈现的 HTML 是一个<body>包含输入类型和该类型标签的块。（这种讨论没问题。）

然而，JavaScript/jQuery 几乎没有关系。我不明白为什么 UI 项目应该有一个label和一个actor. 自动完成的一般显示表明您希望将餐厅和美食保持在一起并将它们显示为单个选择器，但您希望它们在其中一个上进行选择。这不是小部件“直接开箱即用”提供的东西，但它具有挂钩，您可以在其中添加代码以完成您想要的。

一个好的起点是意识到虽然小部件很有帮助，但它并不意味着处理多值对象。你将不得不做一些重要的定制。

于 2013-06-01T07:34:10.847 回答