Question

我的目标是在搜索栏中输入股票代码，并以动态方式将链接附加到结果中。例如，当我搜索FLWS时，会出现一个元素，如下所示，当我单击该元素时，它会将我带到特定页面。因此，当我在搜索栏中输入FLWS时，它允许我转到此网址：https://api.iextrading.com/1.0/stock/FLWS/quote，当我输入MSFT时，它允许我转到https://api.iextrading.com/1.0/stock/MSFT/quote

提前谢谢。

我的jsFiddle：http://jsfiddle.net/9afw1wq9

所以我的问题是如何创建一个动态链接来解析我输入的元素。到目前为止我有这个：

<!DOCTYPE html>
<html>
<head>
    <!-- inserting jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <style>
        * {
            box-sizing: border-box;
        }

        #myInput {
            //background-image: url('/css/searchicon.png');
            background-position: 10px 12px;
            background-repeat: no-repeat;
            width: 100%;
            font-size: 16px;
            padding: 12px 20px 12px 40px;
            border: 1px solid #ddd;
            margin-bottom: 12px;
        }

        #myUL {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        #myUL li a {
            border: 1px solid #ddd;
            margin-top: -1px; /* Prevent double borders */
            background-color: #f6f6f6;
            padding: 12px;
            text-decoration: none;
            font-size: 18px;
            color: black;
            display: block
        }

        #myUL li a:hover:not(.header) {
            background-color: #eee;
        }
    </style>
    </head>
    <body>
    <h2>My Portfolio</h2>
    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for a Stock Symbol.." title="Type in a name">
    <ul id="myUL">
        <li><a href="#">Christina</a></li>
        <li><a href="#">Cindy</a></li>

        <!-- Starting the Stock Test -->
        <li><a href="#">FLWS</a></li>
    </ul>
    <script>

        function myFunction() {
            var input, filter, ul, li, a, i;
            input = document.getElementById("myInput");
            console.log(input);
            filter = input.value.toUpperCase();
            ul = document.getElementById("myUL");
            li = ul.getElementsByTagName("li");
            for (i = 0; i < li.length; i++) {
                a = li[i].getElementsByTagName("a")[0];
                if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
                    li[i].style.display = "";
                } else {
                    li[i].style.display = "none";

                }
            }
            //Returning the result
            console.log(filter);

            var parser = document.createElement('a');
            //End result should look like: https://api.iextrading.com/1.0/stock/VNOM/quote
            parser.href = "https://api.iextrading.com/1.0/stock/";

            parser.StockName = filter;
            console.log("Parser StockName: " + parser.StockName);

            var url = parser.href;
            var stockName = parser.StockName;
            var result = url + stockName;

            //concat quote to the end of the url
            var quoteAdd = "/quote";
            result = result + quoteAdd
            console.log("quote: " + quoteAdd);
            console.log("Final url: " + result);

            //counting letters in the filter
            var count = filter.replace(/[^A-Z]/gi, "").length;
            console.log(count);
            if (count == 2 || count == 3 || count == 4 && filter){
                if($("#myUL").length) {
                    console.log("nested if result: " + result);

                    /*  I need to find the element that i searched for, then add the result url to the button.
                        For example, when i search for FLWS, i click on that tag to take me to a new page.
                     */

                    ul = document.getElementById("myUL");
                    li = ul.getElementsByTagName("li");
                    console.log(li);

                    var result1 = document.getElementById('li');
                    console.log("nested result After: " + result);
                    console.log("result1: " + result1);
                }
            }
            return result;
        }
    </script>
</body>
</html>

Answer 1

您的代码在网址构建之前一直有效。您只需将结果添加到文档中。见最后两行。

if (count == 2 || count == 3 || count == 4 && filter){
    if($("#myUL").length) {
        console.log("nested if result: " + result);

        /*  I need to find the element that i searched for, then add the result url to the button.
            For example, when i search for FLWS, i click on that tag to take me to a new page.
         */

        ul = document.getElementById("myUL");
        li = ul.getElementsByTagName("li");
        console.log(li);

        var result1 = document.getElementById('li');
        console.log("nested result After: " + result);
        console.log("result1: " + result1);
        var resultDiv = "<li><a href=" + "'" + result + "'" + ">" + filter + "</a></li>"
        $("#myUL").append(resultDiv);
    }
}

解析我输入的元素的动态链接

1 个答案: