Question

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

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

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

1：我需要创建一个字典。这将是某种类型的数组。 2：现在你需要为作业提供两个元素：文本输入（INP）和显示建议的列表（LIST）。在HTML中它就像这样：

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

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

a）在输入框内找到值。例如，在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]

自动完成不起作用

2 个答案: