Question

我的html代码中有一个列表，其中列表中有6-7个项目。列表顶部有一个搜索框，因此当用户键入字母A时，列表应仅显示包含的项目A项目名称的开头或内部。

所以我想说我在列表中有6个项目，两个项目包含A.And在搜索框中我输入＆＃39; a＆＃39;然后代替6个项目只显示两个应该同时显示和同时显示对于其他人，与搜索框工作中的自动完成相同

我的代码在

下面

 <ul>
<input type="text" name="search" placeholder="search">
    <li><a href="#" name="one">john</a></li>
    <li><a href="#" name="one">khair</a></li>
    <li><a href="#" name="one">compton</a></li>
    <li><a href="#" name="one">Jordan</a></li>
    <li><a href="#" name="one">Micheal</a></li>
    <li><a href="#" name="six">Peter</a></li>
    </ul>

请帮我查询搜索框代码

Answer 1

尝试喜欢

HTML

<input type="text" id="query" class="text-field valid" autocomplete="off" placeholder="Search here">

的Javascript

a1 = $('#query').autocomplete({
width: 448,
delimiter: /(,|;)\s*/,
lookup: 'Andorra,Azerbaijan,Bahamas,Bahrain,Bangladesh,Barbados,Belarus,Belgium,Belize,Benin,Bhutan,Bolivia,Bosnia Herzegovina,Botswana,Brazil,Brunei,Bulgaria,Burkina, Burundi,Cambodia,Cameroon,Canada,Cape Verde,Central African Rep,Chad,Chile,China,Colombia,Comoros,Congo,Congo {Democratic Rep},Costa Rica,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,Grenada,Guatemala,Guinea,Guinea-Bissau,Guyana,Haiti,Honduras,Hungary,Iceland,India,Indonesia,Iran,Iraq,Ireland {Republic},Israel,Italy,Ivory Coast,Jamaica,Japan,Jordan,Kazakhstan,Kenya,Kiribati,Korea North,Korea South,Kosovo,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,Monaco,Mongolia,Montenegro,Morocco,Mozambique,Myanmar, {Burma},Namibia,Nauru,Nepal,Netherlands,New Zealand,Nicaragua,Niger,Nigeria,Norway,Oman,Pakistan,Palau,Panama,Papua New Guinea,Paraguay,Peru,Philippines,Poland,Portugal,Qatar,Romania,Russian Federation,Rwanda,St Kitts & Nevis,St Lucia,Saint Vincent & the Grenadines,Samoa,San Marino,Sao Tome & Principe,Saudi Arabia,Senegal,Serbia,Seychelles,Sierra Leone,Singapore,Slovakia,Slovenia,Solomon Islands,Somalia,South Africa,South Sudan,Spain,Sri Lanka,Sudan,Suriname,Swaziland,Sweden,Switzerland,Syria,Taiwan,Tajikistan,Tanzania,Thailand,Togo,Tonga,Trinidad & Tobago,Tunisia,Turkey,Turkmenistan,Tuvalu,Uganda,Ukraine,United Arab Emirates,United Kingdom,United States,Uruguay,Uzbekistan,Vanuatu,Vatican City,Venezuela,Vietnam,Yemen,Zambia,Zimbabwe'.split(',')
});

OR

<script>
    $(function() {
        var availableTags = [
            "ActionScript",         "AppleScript",
            "Asp",              "BASIC",
            "C",                "C++",
            "Clojure",              "COBOL",
            "ColdFusion",           "Erlang",
            "Fortran",              "Groovy",
            "Haskell",              "Java",
            "JavaScript",           "Lisp",
            "Perl",             "PHP",
            "Python",               "Ruby",
            "Scala",                "Scheme"
        ];
        $( ".tags" ).autocomplete({
            source: availableTags
        });
    });
    </script>

<div><input class="tags" type="text" /></div>
<div><input class="tags" type="text" /></div>

OR

$('#tags').on('keyup',function(e){
  // cache all the tag elements in an array
  var tagElems = $('#autocompletes1').children();

  // hide all tags
  $(tagElems).hide();


  for(var i = 0; i < tagElems.length; i++){ // loop through all tagElements
    var tag = $(tagElems).eq(i);

    if(($(tag).text().toLowerCase()).indexOf($(this).val().toLowerCase()) === 0){
      // if element's text value starts with the hint show that tag element
      $(tag).show();
    }
  }
});

Demo

Demo2

Demo3

Answer 2

以下是根据您的需求定制的JSFIDDLE ：

HTML code：

<div class="ui-widget">
<label for="tags">Search: </label>
<input id="tags">
</div>

JS代码：

 $(function() {
var availableTags = [
"john",
"khair",
"compton",
"Jordan",
"Micheal",
"Peter"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});

我使用的插件是jQuery-ui autocomplete。您可以参考其文档和演示示例。这个插件很棒，可以高度定制！

在jquery ajax中的列表上自动完成

2 个答案: