null+****@clear*****
null+****@clear*****
2011年 5月 6日 (金) 15:27:42 JST
Kouhei Sutou 2011-05-06 06:27:42 +0000 (Fri, 06 May 2011)
New Revision: 1346ee3e3106e8c4353890b87113878179985806
Log:
[example][dictionary] use jQuery UI autocomplete widget.
Modified files:
examples/dictionary/html/css/dictionary.css
examples/dictionary/html/index.html
examples/dictionary/html/js/dictionary.js
Modified: examples/dictionary/html/css/dictionary.css (+2 -2)
===================================================================
--- examples/dictionary/html/css/dictionary.css 2011-05-06 06:27:05 +0000 (81aeab0)
+++ examples/dictionary/html/css/dictionary.css 2011-05-06 06:27:42 +0000 (72b5a67)
@@ -1,3 +1,3 @@
-.result {
- color: #0080f0;
+#result {
+ margin-top: 7em;
}
Modified: examples/dictionary/html/index.html (+1 -1)
===================================================================
--- examples/dictionary/html/index.html 2011-05-06 06:27:05 +0000 (9724058)
+++ examples/dictionary/html/index.html 2011-05-06 06:27:42 +0000 (395b0f7)
@@ -20,7 +20,7 @@
<script type="text/javascript" src="js/dictionary.js"></script>
<script type="text/javascript">
$(document).ready(function(){
- $(".search").lookup("http://" + location.host + "/d/suggest");
+ $(".search").autocomplete({source: dictionarySource("http://" + location.host + "/d/suggest")});
});
</script>
<div id="result"></div>
Modified: examples/dictionary/html/js/dictionary.js (+70 -47)
===================================================================
--- examples/dictionary/html/js/dictionary.js 2011-05-06 06:27:05 +0000 (965acb2)
+++ examples/dictionary/html/js/dictionary.js 2011-05-06 06:27:42 +0000 (45f1c33)
@@ -1,51 +1,74 @@
-(function($) {
- $.lookup = function(input, source, columns) {
- var lastq;
- var $input = $(input).attr("autocomplete", "off");
- setTimeout(lookup, 100);
- function lookup() {
- var q = $input.val();
- if (lastq != q) {
- $.getJSON(source+"?callback=?",
- {query: q,
- types: 'complete',
- table: 'item_dictionary',
- column: 'kana',
- limit: 25,
- output_columns: columns},
- function(json) { displayItems(json[1]["complete"]); });
- lastq = q;
- }
- setTimeout(lookup, 100);
- }
+function dictionarySource(url) {
function displayItems(items) {
- if (items && items.length > 2) {
var results = $("<dl />");
- items.shift();
- items.shift();
$.each(items, function(i, val) {
- results.append($("<dt />")
- .append(
- $("<span />")
- .text(val[0])
- .click(function(){
- $(".search").val($(this).text());
- $("#search").submit();
- })));
- results.append($("<dd />")
- .append($("<span />").text(val[1]))
- .append($("<span />").text(val[2]))
- );
- });
+ results.append($("<dt />")
+ .append($("<span />")
+ .text(val[0])
+ .click(function() {
+ $(".search").val($(this).text());
+ $("#search").submit();
+ })));
+ results.append($("<dd />")
+ .append($("<span />").text(val[1]))
+ .append($("<span />").text(val[2]))
+ );
+ });
$("#result")
- .empty()
- .append(results);
- }
- }
- }
- $.fn.lookup = function(source, columns) {
- columns = columns || "_key,gene95_desc,edict_desc";
- this.each(function() { new $.lookup(this, source, columns); });
- return this;
- };
-})(jQuery);
+ .empty()
+ .append(results);
+ };
+
+ var request_index = 0;
+ var columns = "_key,gene95_desc,edict_desc";
+ var xhr;
+ function source(request, response) {
+ if (xhr) {
+ xhr.abort();
+ }
+ xhr = $.ajax(url,
+ {
+ data: {
+ query: request.term,
+ types: 'complete',
+ table: 'item_dictionary',
+ column: 'kana',
+ limit: 25,
+ output_columns: columns
+ },
+ dataType: "jsonp",
+ autocomplete_request: ++request_index,
+ success: function(data, status) {
+ if (this.autocomplete_request != request_index) {
+ return;
+ }
+ var completions = data[1]["complete"];
+ var items = [];
+ if (completions && completions.length > 2) {
+ completions.shift();
+ completions.shift();
+ $.each(completions, function(i, item) {
+ var key = item[0];
+ items.push(key);
+ if (items.length >= 3) {
+ return false;
+ }
+ return true;
+ });
+ }
+ if (completions.length > 0) {
+ displayItems(completions);
+ }
+ response(items);
+ },
+ error: function() {
+ if (this.autocomplete_request != request_index) {
+ return;
+ }
+ response([]);
+ }
+ });
+ };
+
+ return source;
+}