如何从这里摆脱 Js Undefined ？

Question

我的代码没问题，输出进入控制台。但在我的 span 标签中 result(firstname) 显示未定义。我不明白是什么问题。谁能帮我解决这个问题？我怎样才能摆脱这个问题？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Search Baby name</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>

</head>
<body>
<div class="first_div" id="div_id">
    <div><p> Baby Names</p></div>
    <div><p> HOW UNIQUE IS YOUR CHILD NAMES IS ?</p></div>
    Enter Full Name : <input type="text" id="input_id" class="input_class">
    <input type="button" class="btn_class" id="btn_id" value="search">
    </br>
    <span id="result">  </span>

</div>
</body>
</html>


<script>
    function insertWord(tree, string) {
        var keys = Object.keys(tree),
            result = keys.some(function (k) {
                    var i = 0;
                    if (string.substr(0, k.length) === k) {
                        string.slice(k.length);
                        return true;
                    }
                    while (k[i] == string[i] && i < k.length) {
                        i++;
                    }
                    if (i) {
                        var id = k.slice(0, i);
                        tree[id] = {
                            [k.slice(i)]: tree[k], [string.slice(i)]: 0
                        }
                        ;
                        delete tree[k];
                        return true;
                    }

                }
            );

        if (!result) {
            tree[string] = 0;
        }
    }

    $(document).ready(function () {
        localStorage.clear();
        $('#input_id').keyup(function (e) {
            fsname = $('#input_id').val();
            var data = fsname.trim();
            var msg = $('#result');
            msg.empty();
            var localdata = localStorage.getItem(data);
            if (data) {
                if (localdata == null) {
                    $.ajax({
                        url: "search.php",
                        method: "post",
                        data: {
                            input: data
                        },
                        dataType: "",
                        success: function (name) {
                            var getdata = JSON.parse(name);
                            var tree = {};
                            getdata.forEach(insertWord.bind(null, tree));
                            localStorage.setItem(data, JSON.stringify(tree));
                            console.log(JSON.parse(localStorage.getItem(data)));
                            console.log(getdata);
                            var s = getdata.length;
                            for (var j = 0; j < s; j++) {
                                if (getdata[j].surname) {
                                    var show = '<div id="result">' + getdata[j].firstname + " " + getdata[j].surname + '</div>';
                                    msg.append(show);

                                } else {
                                    var show1 = '<div id="result">' + getdata[j].firstname + '</div>';
                                    msg.append(show1);

                                }
                            }
                        }
                    });
                } else {
                    var getdata = JSON.parse(localdata);
                    var s = getdata.length;
                    for (var j = 0; j < s; j++) {
                        if (getdata[j].surname) {
                            var show = '<div id="result">' + getdata[j].firstname + " " + getdata[j].surname + '</div>';
                            msg.append(show);

                        } else {
                            var show1 = '<div id="result">' + getdata[j].firstname + '</div>';
                            msg.append(show1);

                        }
                    }
                }
            }
        })

    });
</script>

我想要我的名字。但它显示未定义。我怎么解决这个问题？在控制台中，我的输出还不错。和数据保存在本地存储中。

Answer 1

您的代码无效，附加了具有相同 ID 的多个元素var show = '<div id="result">' + getdata[j].firstname + " " + getdata[j].surname + '</div>'; msg.append(show);

然而msg是id为result的元素；

请注意，跨度包含 div.
为什么多次包含 jQuery？
隐式全局变量，
</br>无效，
fsname 是全局的（未定义）
缺少分号，
您确定要进行键盘输入吗？ $('#input_id').keyup(function(e) { 在没有油门的情况下对每个按键进行 ajax？如果我按住 "a" 键会怎样？我得到多个 "aaaaa" 也许使用 'change' 事件？
localStorage.clear();在文档就绪事件处理程序中表明您可能希望改用 sessionStorage。
localStorage.setItem(data, JSON.stringify(tree)); 令人费解，通常它看起来像 localStorage.setItem("mytree", JSON.stringify(tree)); 或类似的，然后使用 localStorage.getItem("mytree"); 访问它
fsname = $('#input_id').val(); 你已经在那个事件处理程序中所以使用 fsname = $(this).val();
$(document).ready(function () {最好写成$(function () {作为推荐方法https://api.jquery.com/ready/
重写你的 var show = '<div id="result">' + getdata[j].firstname + " " + getdata[j].surname + '</div>'; 类似 var show = '<span class="result">' + getdata[j].firstname + " " + (!!getdata[j].surname && !!getdata[j].surname)? getdata[j].surname :"" + '</span>';

即走这组线

if (getdata[j].surname) {
     var show = '<div id="result">' + getdata[j].firstname + " " + getdata[j].surname + '</div>';
     msg.append(show);
 } else {
     var show1 = '<div id="result">' + getdata[j].firstname + '</div>';
     msg.append(show1);
 }

改写为这两行

 var showName = getdata[j].firstname + " " + (!!getdata[j] && !!getdata[j].surname)? getdata[j].surname :"";
 msg.append('<span class="result">'  + showName + '</span>');

当你在做的时候，让你的代码更干。

将最后一个放在一个函数中并调用它，而不是有条件地将它放入两次。

如果您想在其中使用块 (div)，请将跨度（结果）设置为 DIV。

如何从这里摆脱 Js Undefined ？

how to get rid of Js Undefined from here?

javascript

trie