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

【问题标题】：jQuery UI autocomplete using csv with two fields使用带有两个字段的 csv 的 jQuery UI 自动完成
【发布时间】：2017-12-03 06:34:11
【问题描述】：

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

【问题讨论】：

浏览量很多但没有回复——我难倒大众了吗？来吧，伙计们！在这里帮我一把！

标签： csv jquery-autocomplete

【解决方案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) 一个关联数组，散列，将数据对象与级联值关联起来。

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

$( "#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 );
};

【讨论】：

【解决方案2】：

假设您从 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);
    }
});

【讨论】：

我尝试了您建议的代码（PHP 和 JS，但不幸的是这不起作用。您是否打算将建议的代码作为使自动完成功能发挥作用的完整代码？
是的，我给出的 PHP 和 JS 示例是检查自动完成功能是否正常工作。我忘了在你的 PHP 中回显之前添加header('Content-type: application/json');。你能检查它是否正确接收 JSON 吗？如果您确保 PHP 的输出是 json 就像您给出的问题一样。然后它应该正确读取 json。
我添加了header(... 行，但不幸的是这并没有成功。我进行了双重和三重检查以确保一切正确（根据您的建议），但它仍然无法正常工作。更麻烦的是，我在$.getJSON 行之前和之后添加了一个console.log() 命令，这甚至不起作用 - 是的，元素选择器是正确的......

【解决方案3】：

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

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

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

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

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

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

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

【讨论】：

我理解你的观点，但事实上，我已经得到了解决这种情况。我需要使用 PHP 从具有特定格式的 csv 文件填充功能性 jQuery UI 自动完成功能，以将数据提供给 JS。顺便说一句，如果我的问题不清楚并且没有人因此而回答，那么至少需要更多信息来回答的读者也许应该让我知道。如果他们有的话，也许我可以早点解决这个问题。 ;)
在我看来你不明白我的观点。我们都是志愿者，要回答的问题比我们有时间要多得多；由提问者决定是否让他们的问题足够清晰和有趣，以便有人想要回答。您的描述含糊不清，您的代码与您的描述不符，很明显您需要更多的教育和培训，我们可以在这里提供。 SO 是通过回答明确定义的普遍感兴趣的问题来提供教育。这个问题读起来更像是“请为我写代码，因为我太忙了”。
关于一个问得好问题的例子，请参阅stackoverflow.com/q/16435428/712765

【解决方案4】：

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

也许你可以替换：

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

由

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

所以它变成了 (untested)：

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

【讨论】：