2017-09-23 7 views
0

私の目標は、検索バーに株式記号を入力し、リンクを結果に結び付ける動的な方法です。たとえば、FLWSを検索すると、下のような要素が表示され、その要素をクリックすると特定のページに移動します。したがって、検索バーにFLWSと入力すると、https://api.iextrading.com/1.0/stock/FLWS/quoteと入力してMSFTと入力するとhttps://api.iextrading.com/1.0/stock/MSFT/quote要素Iを解析する動的リンク

ありがとうございます。

enter image description here

マイ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> 
+0

あなたの質問にソースコードをダンプするのではなく、スニペットを作成してください。これにより、自分自身や他の人がソースコードを実行して問題をよりよく理解し、解決策が意図したとおりに機能していない理由を説明することができます。ありがとうございました。 – NewToJS

+0

私に秒を与える – Jghorton14

+0

私はjsfiddleを追加しました – Jghorton14

答えて

1

あなたのコードはURL構築まで機能しています。結果をドキュメントに追加するだけです。最後の2行を参照してください。

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); 
    } 
}