次のコードは、WP Google Suggestプラグインからのものです。
(function ($) {
$.fn.googleSuggest = function (opts) {
var services = {
youtube: 'youtube',
books: 'books',
products: 'products',
news: 'news',
images: 'img',
web: 'psy'
};
opts = $.extend({
service: 'web',
secure: false
}, opts);
opts.source = function (request, response) {
$.ajax({
url: 'http' + (opts.secure ? 's' : '') + '://suggestqueries.google.com/complete/search?callback=?',
dataType: 'jsonp',
data: {
q: request.term,
client: services['youtube'],
nolabels: 't'
},
success: function (data) {
response($.map(data[1], function (item) {
return {
value: $("<span>").html(item[0]).text()
}
}));
}
});
};
return this.each(function () {
$(this).autocomplete(opts);
});
};
$('#s').googleSuggest();
})(jQuery);
Wordpress の検索フィールドに Google の提案するオートコンプリート検索オプションを追加することになっています。問題は、提案された検索文字列を選択すると、フォームが入力されただけで送信されないことです。送信するには、もう一度 Enter キーを押す必要があります。したがって、問題は、選択時に送信を追加する方法です。
ありがとうございました。
==============================================
編集:私はこのコードに戻って、いくつかの進歩を遂げました。次のコードを追加しました。
opts.select = function(opts) {
$(this).autocomplete(opts).parents('form').submit();
}
「リターン」行の前。
return this.each(function () {
..
ここで、自動提案の結果を矢印で上下に移動して Enter キーを押すと、正しい文字列でフォームが送信されます。
ただし、候補をマウスでクリックすると、入力された元の検索文字列が送信されます。動作の例は次のとおりです。
フォームに入力された検索文字列: one two 自動候補:
一二三
一二三四
ワン ツー スリー フォー ファイブ
自動候補の 1 つをマウスでクリックすると、たとえば「ワン ツー スリー フォー」と発声すると、検索フィールドに表示されます。フォームは送信されますが、元の入力文字列「one two」で送信されたことが判明しました。
あなたが持っているかもしれない提案をありがとう。
=======================================
私は最終的に別のコードで問題を解決することができました:
var suggestCallBack; // global var for autocomplete jsonp
jQuery(document).ready(function ($) {
$("#s").autocomplete({
select: function (event, ui) {
var selectedObj = ui.item;
$("#s").val(selectedObj.value);
$('#cse-search-box').submit();
},
source: function(request, response) {
$.getJSON("http://suggestqueries.google.com/complete/search?callback=?",
{
"hl":"bg", // 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 = 10; // prune suggestions list to only 5 items
response(suggestions);
};
},
});
});
コードは、別の質問でユーザーPSRによって提供されました。少し変更する必要がありました。元のコードは次で始まりました。
var suggestCallBack; // global var for autocomplete jsonp
$(document).ready(function () {
Wordpress の場合は、次のように開始する必要があります。
var suggestCallBack; // global var for autocomplete jsonp
jQuery(document).ready(function ($) {
ケースを閉じました。