使用AJAX的HTML/Javascript搜索功能

我創建了一個網頁，我希望用戶能夠搜索存儲在CSV文件中的單詞/術語，並且如果找到該術語，則該線條的完整行將會返回並顯示給用戶（理想情況下是表格格式，否則textarea會這樣做）。使用AJAX的HTML/Javascript搜索功能

但我需要使用AJAX來做到這一點，我也不能使用PHP（不幸的是，否則我不會問這個問題）。

到目前爲止，我有一個表格/輸入/按鈕，我也有代碼來讀取文件，但我有點卡在一起。我知道這應該是一件容易的事情，但我花了很多時間閱讀教程和在線問題，但沒能找到類似的東西。

如果有人知道任何涵蓋此的教程，或者可以幫助下面的代碼，將不勝感激。

<table>   
    <tr><td>Enter Search Term: 
    <input type="text" name="searchword" /> 
    <input type="button" name="searchbutton" value="Search" onclick="contentDisp();"> 
    </td></tr> 
    <tr><td><textarea id="contentArea" rows="40" cols="60"></textarea></td></tr> 
    </table> //currently using text area but ideally this would be displayed in a table 

    <script type="text/javascript"> 
    function contentDisp() 
     { 
      $.ajax({ 
       url : "file.csv", 
       success : function (data) { 
        $("#contentArea").html(data); // I THINK SOMETHING NEEDS TO GO IN HERE, WHICH WILL GRAB THE SEARCH TERM ABOVE AND THEN ONLY DISPLAY FILE CONTENTS USING THAT TERM, POSSIBLY 'CONTAIN' */ 
       } 
      }); 
     } 
    </script>

來源

2012-06-05 K Green

有可能通過JavaScript這樣做嚴格使用一些strpos和功能的indexOf（的indexOf是起點，而其他將查找字符串分隔符（S））。

如果您對此感到滿意，也可以使用php來完成任務，如果您受到域限制的限制，請查看JSONP，它代表帶有填充的JSON - 這基本上意味着您需要將結果包裝在JavaScript函數中。

祝你好運。

來源

2012-06-05 12:45:52

謝謝，我看到了JSON東西，所以會去再看看那個。我知道如何在PHP中執行此操作，但由於外部限制而無法使用PHP。 –

用戶正則表達式查找您的字符串並解析CSV數據中找到的行。

http://www.w3schools.com/jsref/jsref_obj_regexp.asp

來源

2012-06-05 12:47:13

HTML

<input type="text" id="text" /> 
<input type="submit" id="btnsubmit" />

腳本

$(function(){ 
$('#btnsubmit').on('click', function(){ 
    var csv = $.ajax('text.csv'); 
    csv.done(function(data){ 
     var str = data.split(','); 
     var value = $('#text').val(); 
     $.each(str, function(index, item){ 
      if(item.match(value)){ 
       console.log(item) //Output 
      }; 
     }) 
    }) 
}) 
});

CSV

Presidency ,President ,Wikipedia Entry,Took office ,Left office ,Party ,Portrait,Thumbnail,Home State

來源

2012-06-05 13:13:34

謝謝你，但不幸的是不適合我。我正在使用netbeans，我不確定該代碼適用於訪問文件。也不確定關於console.log的結果，因爲我不知道如何顯示結果。該指數也出現錯誤，未使用的價值。你測試過了嗎？你使用任何額外的庫/插件？ –

console.log將在Firebug或Web開發者控制檯中打印輸出。它與您使用的代碼相同。 var csv = $ .ajax（'text.csv'）; - 從csv獲取結果。而不是使用成功：function（） - >我已經使用csv.done。 http://api.jquery.com/jQuery.ajax/。我用過jQuery 1.7.2。它與IDE無關（netbeans，dreamweaver等）。 –

爲什麼你會使用strpos和的indexOf JavaScript時已經內置在函數離子匹配字符串？

http://jsfiddle.net/AWZg8/

來源

2012-06-05 13:18:02 mari

嗨。我試圖瞭解你在鏈接 –

函數contentDisp（）{ //jQuery.ajax（{//假設這被稱爲 // url：「file。csv「， //成功：function（data）{ //現在讓我們假設數據獲取： var data =」one; two; three; four;「; result = findIn（jQuery（」＃searchword「））。 val（），data）; makeList（「＃contentArea」，result）; –

我不確定你從csv文件中讀出的註釋方式，你是說我應該在那裏調用這個文件，因爲沒有其他的提到它被引用到其他任何地方。你的例子是用ajax工作的csv文件嗎？還是僅僅是一個建議？ –

使用AJAX的HTML/Javascript搜索功能

回答

相關問題