如何使用JQuery填充來自link元素的HTML輸入的值

Question

我有輸入，我建議使用Ajax從數據庫中自動填寫單詞列表。 我使用bootstrap 4來設計列表，但是使用<a></a>標記而不是<li></li>標記，因為當我使用<a>而不是<li>元素時，bootstrap 4提供了懸停效果清單。

一切正常，正在顯示單詞列表，但是當用戶單擊所需單詞時，我不知道如何填充輸入的值。

我的HTML看起來像這樣：

<form action="index.html" method="post">
        <div class="form-group">
          <label for="team1">First Team</label>
          <input id="team1" type="text" name="team1">
          <div id="autoFil" class="list-group col-sm-12"></div>
            //Here I generate the list using Ajax which looks like this

            <a class="list-group-item list-group-item-action ">Keyword 1</a>
            <a class="list-group-item list-group-item-action ">Keyword 2</a>
            <a class="list-group-item list-group-item-action ">Keyword n</a>
         </div>
</form>

Answer 1

您可以將clickHandler事件添加到您的錨，看到這個以獲取更多信息。

然后，clickHandler將基本上使用所單擊的a元素的innerHTML並填充其他任何元素的內容。

Answer 2

<form action="index.html" method="post">
        <div class="form-group">
          <label for="team1">First Team</label>
          <input id="team1" type="text" name="team1">
          <div id="autoFil" class="list-group col-sm-12"></div>
            //Here I generate the list using Ajax which looks like this

            <a class="list-group-item list-group-item-action " onclick="fillInput('Keyword 1')">Keyword 1</a>
            <a class="list-group-item list-group-item-action " onclick="fillInput('Keyword 2')">Keyword 2</a>
            <a class="list-group-item list-group-item-action " onclick="fillInput('Keyword n')">Keyword n</a>
         </div>
</form>
<script>
    function fillInput(val){
       document.getElementById('team1').value = val;
}

Answer 3

如果在設置輸入字段的值時遇到問題，則應檢查val()

它的用法如下：

$('#team1').val('whatever value you want to set');

如果在為動態生成的鏈接附加單擊處理程序時遇到問題，則應檢查以下現有問題： 動態創建的元素上的事件綁定？