javascript - 自动完成不起作用

Question

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

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