如何在 Jquery Typeahead 的结果列表底部添加帮助文本？

如何解决如何在 Jquery Typeahead 的结果列表底部添加帮助文本？

我使用 jquery typeahead 构建了一个自动完成功能，因为它有很多选项，而且大多数都符合我的要求。

但我想在结果列表的底部添加一些帮助文本，而不是它的默认选项，如下所示：

我检查了它的元素并用纯 Jquery 脚本插入它，但它没有按预期工作。

$.typeahead({    
  input: '.js-typeahead-country_v1',    order: "desc",    source: {        
    data: [            "Afghanistan","Albania","Algeria","Andorra","Angola","Antigua and Barbuda",            "Argentina","Armenia","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh",            "Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia",            "Bosnia and Herzegovina","Botswana","Brazil","Brunei","Bulgaria","Burkina Faso","Burma",            "Burundi","Cambodia","Cameroon","Canada","Cape Verde","Central African Republic","Chad",            "Chile","China","Colombia","Comoros","Congo,Democratic Republic",Republic of the",            "Costa Rica","Cote d'Ivoire","Croatia","Cuba","Cyprus","Czech Republic","Denmark","Djibouti",            "Dominica","Dominican Republic","East Timor","Ecuador","Egypt","El Salvador",            "Equatorial Guinea","Eritrea","Estonia","Ethiopia","Fiji","Finland","France","Gabon",            "Gambia","Georgia","Germany","Ghana","Greece","Greenland","Grenada","Guatemala","Guinea",            "Guinea-Bissau","Guyana","Haiti","Honduras","Hong Kong","Hungary","Iceland","India",            "Indonesia","Iran","Iraq","Ireland","Israel","Italy","Jamaica","Japan","Jordan",            "Kazakhstan","Kenya","Kiribati","Korea,north",South","Kuwait","Kyrgyzstan","Laos",            "Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithuania","Luxembourg",            "Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Marshall Islands",            "Mauritania","Mauritius","Mexico","Micronesia","Moldova","Mongolia","Morocco","Monaco",            "Mozambique","Namibia","Nauru","Nepal","Netherlands","New Zealand","Nicaragua","Niger",            "Nigeria","norway","Oman","Pakistan","Panama","Papua New Guinea","Paraguay","Peru",            "Philippines","Poland","Portugal","Qatar","Romania","Russia","Rwanda","Samoa","San Marino",            "Sao Tome","Saudi arabia","Senegal","Serbia and Montenegro","Seychelles","Sierra Leone",            "Singapore","Slovakia","Slovenia","Solomon Islands","Somalia","South Africa","Spain",            "Sri Lanka","Sudan","Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan",            "Tajikistan","Tanzania","Thailand","Togo","Tonga","Trinidad and Tobago","Tunisia","Turkey",            "Turkmenistan","Uganda","Ukraine","United arab Emirates","United Kingdom","United States",            "Uruguay","Uzbekistan","Vanuatu","Venezuela","Vietnam","Yemen","Zambia","Zimbabwe"        ]    
  },    callback: {        
    onInit: function(node) {            
      console.log('Typeahead Initiated on ' + node.selector);        
    }    
  }
});

$('.typeahead__result').append('<span class="help">Use up/down arrow keys to navigate. Press Enter to select</span>')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.11.0/jquery.typeahead.min.js" integrity="sha512-Rc24PGD2NTEGNYG/EMB+jcFpAltU9svgPcG/73l1/5M6is6gu3Vo1uVqyaNWf/sXfKyI0l240iwX9wpm6HE/Tg==" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.11.0/jquery.typeahead.css" integrity="sha512-AQG3JVpy/h0TsLsFs/HDLjnkq1ih9uUliGGXdQ7LQcGQt7GD+1b7HWOQ2oeCH7tKdtrfRg75CGApafi+//9Dbw==" crossorigin="anonymous" />


<div class="typeahead__container">

  <div class="typeahead__field">

    <div class="typeahead__query">
      <input class="js-typeahead-country_v1" name="country_v1[query]" placeholder="Search" autocomplete="off">
    </div>

    <div class="typeahead__button">

    </div>
  </div>
</div>

因此，有什么方法可以像图片中那样正确地实现此帮助文本？谢谢

解决方法

您可以使用 onLayoutBuiltBefore 回调在列表显示之前对其进行修饰。在本例中，我将它添加到列表的末尾，并使用 .help 类进行样式设置。

$.typeahead({
  input: '.js-typeahead-country_v1',order: "desc",source: {
    data: ["Afghanistan","Albania","Algeria","Andorra","Angola","Antigua and Barbuda","Argentina","Armenia","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia and Herzegovina","Botswana","Brazil","Brunei","Bulgaria","Burkina Faso","Burma","Burundi","Cambodia","Cameroon","Canada","Cape Verde","Central African Republic","Chad","Chile","China","Colombia","Comoros","Congo,Democratic Republic",Republic of the","Costa Rica","Cote d'Ivoire","Croatia","Cuba","Cyprus","Czech Republic","Denmark","Djibouti","Dominica","Dominican Republic","East Timor","Ecuador","Egypt","El Salvador","Equatorial Guinea","Eritrea","Estonia","Ethiopia","Fiji","Finland","France","Gabon","Gambia","Georgia","Germany","Ghana","Greece","Greenland","Grenada","Guatemala","Guinea","Guinea-Bissau","Guyana","Haiti","Honduras","Hong Kong","Hungary","Iceland","India","Indonesia","Iran","Iraq","Ireland","Israel","Italy","Jamaica","Japan","Jordan","Kazakhstan","Kenya","Kiribati","Korea,North",South","Kuwait","Kyrgyzstan","Laos","Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithuania","Luxembourg","Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Marshall Islands","Mauritania","Mauritius","Mexico","Micronesia","Moldova","Mongolia","Morocco","Monaco","Mozambique","Namibia","Nauru","Nepal","Netherlands","New Zealand","Nicaragua","Niger","Nigeria","Norway","Oman","Pakistan","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Poland","Portugal","Qatar","Romania","Russia","Rwanda","Samoa","San Marino","Sao Tome","Saudi Arabia","Senegal","Serbia and Montenegro","Seychelles","Sierra Leone","Singapore","Slovakia","Slovenia","Solomon Islands","Somalia","South Africa","Spain","Sri Lanka","Sudan","Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","Togo","Tonga","Trinidad and Tobago","Tunisia","Turkey","Turkmenistan","Uganda","Ukraine","United Arab Emirates","United Kingdom","United States","Uruguay","Uzbekistan","Vanuatu","Venezuela","Vietnam","Yemen","Zambia","Zimbabwe"]
  },callback: {
    onLayoutBuiltBefore: function(node,query,result,resultHtmlList) {
      if (resultHtmlList) {
        resultHtmlList.append(
          $('<li/>',{
            "text": "Use up/down arrow keys to navigate. Press Enter to select","class": "help"
          })
        );
      }
      return resultHtmlList;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.11.0/jquery.typeahead.min.js" integrity="sha512-Rc24PGD2NTEGNYG/EMB+jcFpAltU9svgPcG/73l1/5M6is6gu3Vo1uVqyaNWf/sXfKyI0l240iwX9wpm6HE/Tg==" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.11.0/jquery.typeahead.css" integrity="sha512-AQG3JVpy/h0TsLsFs/HDLjnkq1ih9uUliGGXdQ7LQcGQt7GD+1b7HWOQ2oeCH7tKdtrfRg75CGApafi+//9Dbw==" crossorigin="anonymous" />


<div class="typeahead__container">

  <div class="typeahead__field">

    <div class="typeahead__query">
      <input class="js-typeahead-country_v1" name="country_v1[query]" placeholder="Search" autocomplete="off">
    </div>

    <div class="typeahead__button">

    </div>
  </div>
</div>

,

$( "#find-subj" ).autocomplete({
    source: availableTags
});