javascript - 将文件转换为数组并使用数据列表和选项标签添加数组元素以用于自动完成文本框

标签 javascript html

<html>
<body>
     <input type="text" list="anrede" />
<datalist id="anrede"></datalist>

<script type="text/javascript">
    var options='';
function readTextFile()
{

    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", "file:///D:/search.txt", false);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText; 
                <!--allText array contains file elements inception force batman superman supergirl-->
                    var arr=allText.split("\n");
                for(var i=0;i<arr.length;i++)
                    {

                        options += '<option value="'+arr[i]+'" />'; <!-- trying to add array elements for auto completion -->

                    }
                 document.getElementById('anrede').innerHTML = options;

            }
        }
    }
    rawFile.send(null);

}
    readTextFile();

    </script>


</body>
</html>

search.txt 包含: 起始 力量 bat 侠 超人 女超人

在文本框中输入时,自动完成结果中元素末尾显示“null”。如何删除它??

最佳答案

<html>
<body>
     <input type="text" list="anrede" />
<datalist id="anrede"></datalist>

<script type="text/javascript">
    var options='';
function readTextFile()
{

    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", "file:///D:/search.txt", false);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText; 
                //allText.replace(/[^\x20-\x7E]/gmi, "")
                var arr=allText.trim().split("\n");
                for(var i=0;i<arr.length;i++)
                    {
                        console.log(arr[i]);
       options+='<optionvalue="'+arr[i].replace(/[^\x20-\x7E]/gmi, "")+'">';

                    }
                 document.getElementById('anrede').innerHTML = options;

            }
        }
    }
    rawFile.send(null);

}
    readTextFile();

    </script>


</body>
</html>

关于javascript - 将文件转换为数组并使用数据列表和选项标签添加数组元素以用于自动完成文本框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36270892/

相关文章:

javascript - 如何以 HTML 形式从 javascript 对象呈现文本

javascript - 如何使用JS获取h1标签的值?

javascript - 在没有宽高比的情况下调整 iframe 的大小

javascript - 即使遵循 Google 的开发人员教程,Google Analytics 事件也无法正常工作

javascript - React,循环对象,显示列表,并在选择时抓取该对象

javascript - JQuery UI Tabs - 为通过 ajax 加载的选项卡重新绑定(bind)事件

javascript - 如何记录页码html-pdf node.js?

javascript - jQuery - 复选框选择一行中的所有内容或具有相似名称和 ID

javascript - 如何使用标签管理器获取输入的标签

javascript - 一个 div 正在扩展页面的宽度