予測変換機能の設置で困ってます！

質問

http://code.google.com/p/googlesuggest-jquery/wiki/GetStarted

のサイトのオープンソースを弄って自分なりに頑張ったんですが、どうしても、元からあるinputのクラスにつなげられません。

誰かこの上サイトにあるJavaScript機能をinputにつなげる方法分かりませんか?

よろしくお願いします。

回答No.1

cero_d · ベストアンサー

<div id="inputs"></div>
に対して、
<script>
$.each("web youtube recipe products news images books".split(" "), function(i, v){
var div = $("<div>").appendTo("#inputs")
, input = $("<input>").appendTo(div)
, span = $("<label>").text(v).appendTo(div);
input.googleSuggest({ service: v });
});
</script>
で、divタブの「idがinputs」に対してinputタグを挿入し、そのinputタグを「googleSuggest」で「Autocomplete」機能を付与させています。

何をどう弄ったのか書いてないのでしりませんが

URLと同じように指定したdivに対して「Autocomplete」機能を付与したい場合なら
指定するdivのidを「#inputs」に記入して下さい。
※idが「testAutoComp」の場合だと
var div = $("<div>").appendTo("#testAutoComp")
になります。

指定したinputタグに対して同じように「Autocomplete」機能を付与したい場合なら
<input id="testAutoComp" />
<script>
$(function() {
var testTags = [
"test1",
"test2",
"test3"
];
$("#testAutoComp").autocomplete({
source: testTags
});
});
</script>
こんな感じで機能付与出来ますよ。

お礼

回答ありがとうございます！
試してみましたが上手くいきませんでした...

補足に記入してる通りに考えてます。
足りなければまた情報を追記します！

補足

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/jquery.googleSuggest.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript">
$(function() {
var testTags = [
"web"
];
$("#text").autocomplete({
source: testTags
});
});
</script>

<input class="text" type="text" name="searchterms" maxlength=255 value="" id="#text">

これにgoogle suggest機能を付け加えたいと考えてます！