自动完成不起作用

Question

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

http://jsfiddle.net/enetqz54/21/

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
<form method="get" action="search.php" class="searchform cf"> 
    <input id="search" name="q" type="text" placeholder="Start typing a search term"> 
    <button type="submit">Search</button> 
</form> 

JS：

var suggestCallBack; // global var for autocomplete jsonp 

$(document).ready(function() { 
    $("#search").autocomplete({ 
     source: function(request, response) { 
      $.getJSON("http://suggestqueries.google.com/complete/search?callback=?", { 
       "hl": "en", // Language     
       "jsonp": "suggestCallBack", // jsonp callback function name 
       "q": request.term, // query term 
       "client": "youtube" // force youtube style response, i.e. jsonp 
      }); 
      suggestCallBack = function(data) { 
       var suggestions = []; 
       $.each(data[1], function(key, val) { 
        suggestions.push({ 
         "value": val[0] 
        }); 
       }); 
       suggestions.length = 5; // prune suggestions list to only 5 items 
       response(suggestions); 
      }; 
     }, 
    }); 
}); 

CSS

*,*: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; 
    } 

Answer 1

jQuery的自动完成，这显然你正在使用，有一个select event。

当选中某个项目时，会触发此事件。由于该值已经填充到输入字段中，因此您唯一要做的就是提交。

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

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

}); 

另见本更新jsFiddle

Answer 2

对不起....我想说的是，你可以创建自己的自动提示脚本。

1：Ist你需要创建一个dictionary.This将是某种数组。 2：现在你需要有两个元素作为一个文本输入（INP）和一个列表来显示建议（LIST）。 在HTML它会是这样的：

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

3：现在，你需要创建某些脚本：

一）要查找输入框里面的值。例如，在jQuery中 $（'＃INP'）。val（）; - 每次按下键时都必须执行该操作，您可以使用$（）。keyup ..

b）现在您必须定义一个方法来查找数组中与该值匹配的项目。使用在JavaScript的indexOf（）函数）
JAVASCRIPT

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

b）一种方法自动填充输入被点击的建议时。
SCRIPT

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

这就是全部。

我已经完成，并创建了一个简单的自动提示脚本...

你可以找到它在github上.. [https://github.com/ArjunAtlast/a2suggest][1]