带有 AJAX 的 HTML/Javascript 搜索功能

Question

我创建了一个网页，希望用户能够搜索存储在 CSV 文件中的单词/术语，如果找到该术语，则该行条目的完整行将返回并显示给用户（最好是表格格式，否则一个文本区域就可以了）。

但是我需要使用 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>

Answer 1

可以通过 JavaScript 严格执行此操作，使用一些 strpos 和 indexOf 函数（indexOf 是起点，而另一个将寻找字符串分隔符）。

如果你觉得舒服的话，也可以用 php 来完成这个任务，如果你受到域源限制的限制，看看 JSONP，它代表 JSON with Padding - 这基本上意味着你'需要将结果包装在 JavaScript 函数中。

祝你好运。

Answer 2

用户正则表达式来查找您的字符串并解析 CSV 数据中找到的行。

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

Answer 3

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

Answer 4

当 javascript 已经有用于匹配字符串的内置函数时，为什么还要使用 strpos 和 indexOf？

http://jsfiddle.net/AWZg8/