HTML/Javascript 搜索函数与 AJAX

HTML/Javascript search function with AJAX

本文关键字：AJAX 函数 搜索 Javascript HTML      更新时间：2023-09-26

>我创建了一个网页，我希望用户能够搜索存储在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>
通过使用

一些strpos和indexOf 函数，可以通过 JavaScript 严格地做到这一点（indexOf 是起点，而另一个将寻找字符串分隔符）。

如果你对PHP感到满意，

也可以用PHP完成任务，如果你受到域源限制的限制，看看JSONP，它代表带有填充的JSON-这基本上意味着你需要将结果包装在JavaScript函数中。

祝你好运。

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

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

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

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

http://jsfiddle.net/AWZg8/

相关文章：