Question

我正在尝试设置一个从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获取数据到自动完成都是这方面的要求。不幸的是，这三项规定并不在我的控制之下。

Answer 1

这是一个jsfiddle，我希望能做到你想要的：http://jsfiddle.net/L8L6k/

javascript顶部有一个变量“data”，您需要使用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）关联数组hash，它将数据对象与连接值相关联。

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 );
};

Answer 2

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

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

您的CSV为＆lt; restaurant＆gt;，＆lt; cuisine＆gt;对
您在网页上有一个多功能框，用户可以在其中输入餐厅或美食。
您希望多功能框基于CSV自动完成。
您希望使用jQuery自动完成小部件来帮助解决此问题。

您提供的代码讲述了一个不同的故事。 PHP代码似乎几乎没有做任何事情。它将文件中的大量数据填充到data[]中，然后对其执行任何操作。我不知道那个函数会产生什么。

除此之外，您提供的HTML是<body>块，其中包含输入类型和该类型的标签。（这种讨论还可以。）

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

一个好的开始就是要意识到虽然小部件很有用，但它并不意味着要处理多值对象。您将不得不做一些重要的定制。

Answer 3

假设您从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"
]

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

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

在<script>添加：

$( "#txtSearchRestaurant" ).autocomplete({
    source: 
    function( request, response ) {
        $.getJSON( "/searchRestaurant.php", response);
    }
});

Answer 4

我认为返回数组中的键应该是'label'和'value'。

也许你可以替换：

$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)));
?>

使用带有两个字段的csv进行jQuery UI自动完成

4 个答案: