Javascript 自动完成不'；行不通

我将谷歌搜索查询与我的简单搜索表单集成在一起。它按预期在下拉列表中显示查询，但当我单击查询时，它不会搜索该查询。代码如下：

HTML:

CSS

---

jQuery的autocomplete（显然您正在使用）有一个

选择项目时会触发此事件。由于该值已填充到输入字段中，因此您只需提交即可

$("#search").autocomplete({
    // irrelevant code omitted

    select: function(event, ui){
        $(this).parent('form').trigger('submit');
    }

});

---

另请参见此更新的

抱歉。。。。我想说的是，您可以创建自己的autosuggest脚本

1：你需要创建一个字典。这可能是某种数组。 2：现在你需要有两个工作元素：文本输入（INP）和显示建议的列表（list）。 在HTML中是这样的：

<input type="text" id="INP"/>
<ul id="LIST">
</ul>

这就是全部。

我已经完成并创建了一个简单的自动建议脚本

你可以在github上找到它。。

---

[

您的

选择事件处理程序在哪里？
*,*:after,*:before {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

 .cf:before,
 .cf:after {
     content:"";
     display:table;
 }
 .cf:after {
     clear:both;
 }

 body {
   background: #3aaae8;
   color: #fff;
   font:12px/18px 'HelveticaNeue', Helvetica, Arial, sans-serif;
 }

 a,a:visited {   color:#fff }

 /*--------------------------------------------------------------
 2.0 - SEARCH FORM
 --------------------------------------------------------------*/ .searchform {   background:#f4f4f4;  
 background:rgba(244,244,244,.79);   border: 1px solid #d3d3d3;
     left: 50%;   padding: 2px 5px;   position: absolute;
     margin: -22px 0 0 -170px;
     top: 50%;   width:339px;   box-shadow:0 4px 9px rgba(0,0,0,.37);   -moz-box-shadow:0 4px 9px rgba(0,0,0,.37);   -webkit-box-shadow:0 4px 9px rgba(0,0,0,.37);   border-radius: 10px;   -moz-border-radius:
 10px;   -webkit-border-radius: 10px }

 .searchform input, .searchform button {
     float: left } .searchform input {
     background:#fefefe;
     border: none;
     font:12px/12px 'HelveticaNeue', Helvetica, Arial, sans-serif;
     margin-right: 5px;
     padding: 10px;
     width: 216px;
     box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);
     -moz-box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);
     -webkit-box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);   border-radius: 9px;   -moz-border-radius:
 9px;   -webkit-border-radius: 9px }
     .searchform input:focus {
         outline: none;
         box-shadow:0 0 4px #0d76be inset;
         -moz-box-shadow:0 0 4px #0d76be inset;
         -webkit-box-shadow:0 0 4px #0d76be inset;
     }
     .searchform input::-webkit-input-placeholder {
       font-style: italic;
       line-height: 15px
     }

     .searchform input:-moz-placeholder {
       font-style: italic;
       line-height: 15px
     }

 .searchform button {
     background: rgb(52,173,236);
     background: -moz-linear-gradient(top, rgba(52,173,236,1) 0%, rgba(38,145,220,1) 100%);
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(52,173,236,1)),
 color-stop(100%,rgba(38,145,220,1)));
     background: -webkit-linear-gradient(top, rgba(52,173,236,1) 0%,rgba(38,145,220,1) 100%);
     background: -o-linear-gradient(top, rgba(52,173,236,1) 0%,rgba(38,145,220,1) 100%);
     background: -ms-linear-gradient(top, rgba(52,173,236,1) 0%,rgba(38,145,220,1) 100%);
     background: linear-gradient(to bottom, rgba(52,173,236,1) 0%,rgba(38,145,220,1) 100%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#34adec', endColorstr='#2691dc',GradientType=0 );
     border: none;
     color:#fff;
     cursor: pointer;
     font: 13px/13px 'HelveticaNeue', Helvetica, Arial, sans-serif;
     padding: 10px;
     width:106px;
     box-shadow: 0 0 2px #2692dd inset;
     -moz-box-shadow: 0 0 2px #2692dd inset;
     -webkit-box-shadow: 0 0 2px #2692dd inset;   border-radius: 9px;   -moz-border-radius: 9px;   -webkit-border-radius: 9px; }
     .searchform button:hover {
         opacity:.9;
     }

$("#search").autocomplete({
    // irrelevant code omitted

    select: function(event, ui){
        $(this).parent('form').trigger('submit');
    }

});

<input type="text" id="INP"/>
<ul id="LIST">
</ul>

var i =0;
var SUGG="";
while(i<array.length){
   if(array[i].indexOf($('#INP').val().toString()!=-1){
      SUGG+="<li><a class='sugg'>"+array[i]+"</a></li>"
   }
}
$('#LIST').html(SUGG);

$('.sugg').click(function(e){
    $('#INP').val($(this).text());
    $('#LIST').html("");
});