使用csv和兩個字段的jQuery UI自動完成

我試圖設置一個從csv獲取其數據的自動完成。 csv有一個餐廳名稱和食物類型的列表。我已經瀏覽了一些其他的帖子，以及自動完成的文檔，但我認爲這是csv中的兩個字段，而不是一個字段讓我沮喪。使用csv和兩個字段的jQuery UI自動完成

例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將自動完成的數據是這一切的要求。不幸的是，這三項規定不在我的控制之下。

來源

2013-05-21 marky

大量的意見，但沒有答覆 - 沒有我難倒羣衆？來吧，夥計們！借我一把！ – marky

我不太熟悉PHP，但是這通常看起來像你對這些概念不清楚。給讀者的提示：缺乏反應往往表明問題的提法不明確。

糾正我，如果我錯了，但這裏是我的理解，從你的描述的問題：

你有<餐廳>，<美食>對的CSV。
在網頁上有一個多功能框，用戶可以輸入餐廳或美食。
您希望基於CSV的多功能框自動完成。
您想使用jQuery自動填充小部件來幫助解決這個問題。

您提供的代碼告訴了一個不同的故事。 PHP代碼似乎幾乎沒有做任何事情。它將大量來自文件的數據填充到data[]中，然後不做任何處理。我不知道那個函數產生了什麼。

設置，一旁，呈現HTML是<body>塊包含一個輸入類型和該類型的標籤。（沒關係了這種討論。）

中的JavaScript/jQuery的，然而，幾乎沒有涉及。我不明白爲什麼UI項目預計將有一個label和actor。自動完成的一般顯示錶明您想要將餐廳和美食保持在一起，並將它們顯示爲單個選擇器，但您希望讓它們選擇。這不是小部件提供的「直接開箱即用」，但它具有掛鉤，您可以在其中添加代碼以實現您想要的功能。

一個良好的開端是要認識到，而widget是有幫助的，這並不意味着處理多值的對象。你將不得不做一些重要的定製。

來源

2013-06-01 07:34:10

我明白你的觀點，但事實上，我已經解決了這個問題。我需要使用PHP將具有特定格式的csv文件填入功能完整的jQuery UI自動填充，以便將數據服務到JS。順便說一下，如果我的問題不清楚，也沒有人因此回答，那麼至少需要更多信息回答的讀者或許應該讓我知道。也許如果他們能早點解決這個問題的話，我可能會得到解決的。 ;） – marky

在我看來你並不瞭解我的觀點。我們都是志願者，有更多的問題需要回答，而不是我們有時間;提問者要讓他們的問題足夠清晰，足以讓有人想要回答它，這取決於提問者。您的描述很模糊，您的代碼與您的描述不符，顯然您需要更多的教育和培訓，我們可以在這裏提供。 SO就是通過回答關於一般利益的明確問題來提供教育。這個問題更像是「請爲我寫代碼，因爲我頭腦不清」。 –

有關問題的一個示例，請參閱http://stackoverflow.com/q/16435428/712765 –

假設你從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); 
    } 
});

來源

2013-06-01 20:07:43 user568109

我嘗試了您的建議代碼（包括PHP和JS，但不幸的是沒有工作。是您的意圖嗎？你提示的代碼應該是完成自動完成功能的代碼嗎？ – marky

是的，我給出的PHP和JS示例是檢查自動完成是否正常工作。我忘了添加'header（'Content-type：application/json' ）;''在你迴應PHP之前，你能檢查它是否正確接收JSON嗎？如果你確保PHP的輸出是你提供的json，那麼它應該正確地讀取json – user568109

我添加了'header ...'行，但不幸的是，這並沒有做到這一點，我進行了雙重和三重檢查，以確保一切正確（根據您的建議），但仍然無法正常工作，更麻煩的是我添加了一個' console.log（）'命令之前nd'$ .getJSON'之後，這甚至不工作 - 是的，元素選擇器是正確的... – marky

這裏，我希望一個的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，這僅僅是一個concate這兩個價值觀的國家，名稱和類型。這將作爲源傳遞給JQuery UI自動完成。這種方式自動完成將搜索您的「項目」和「類型」。

2）關聯數組，散列，這與所串接值的數據對象相關聯。

無論是選擇功能和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-05 23:48:21

我想返回數組中的關鍵應該是「標籤」和「價值」。

也許你可以取代：

$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-07 08:15:25 Rembunator

使用csv和兩個字段的jQuery UI自動完成

回答

相關問題