{"id":3471,"date":"2014-04-09T13:31:11","date_gmt":"2014-04-09T04:31:11","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=3471"},"modified":"2014-04-09T15:07:07","modified_gmt":"2014-04-09T06:07:07","slug":"post-3471","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/javascript\/3471","title":{"rendered":"[Autocomplete] \u304b\u306a\u5165\u529b\u3067\u540d\u524d\uff08\u6f22\u5b57\uff09\u3092\u7d5e\u308a\u8fbc\u3080\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9"},"content":{"rendered":"

\"autocomplete.kana.js\"<\/a><\/p>\n

example<\/a><\/p>\n

\u5165\u529b\u3057\u305f\u300c\u3072\u3089\u304c\u306a\u300d\u3092\u5143\u306b\u540d\u524d(\u6f22\u5b57)\u306e\u4e00\u89a7\u3092\u7d5e\u308a\u8fbc\u3080\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9\u304c\u5fc5\u8981\u306b\u306a\u3063\u305f\u306e\u3067\u3059\u304c\u3001\u306a\u304b\u306a\u304b\u7528\u9014\u306b\u898b\u5408\u3046\u30b5\u30b8\u30a7\u30b9\u30c8\u30d7\u30e9\u30b0\u30a4\u30f3\u304c\u306a\u304b\u3063\u305f\u306e\u3067jQuery UI\u306e\u30ab\u30b9\u30bf\u30e0\u30b3\u30f3\u30dc\u30dc\u30c3\u30af\u30b9\u3092\u6539\u826f\u3057\u3066\u4f5c\u3063\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n

\u30b5\u30f3\u30d7\u30eb<\/h2>\n

jQuery, jQuery Ui\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u3068\u3068\u3082\u306b\u300cautocomplete.kana.js\u300d\u3092\u8aad\u307f\u8fbc\u3080\u3093\u3067\u304f\u3060\u3055\u3044\u3002
\noption\u8981\u7d20\u306b\u8a2d\u5b9a\u3057\u305fdata-kana\u5c5e\u6027\u306e\u5024\u3067\u7d5e\u308a\u8fbc\u307f\u3092\u884c\u3046\u30b3\u30f3\u30dc\u30dc\u30c3\u30af\u30b9\u3092\u8868\u793a\u3057\u307e\u3059\u3002 <\/p>\n

<!doctype html>\r\n<html lang=\"jp\">\r\n<head>\r\n<meta charset=\"utf-8\">\r\n<title>jQuery UI Autocomplete \u304b\u306a\u7d5e\u308a\u8fbc\u307f<\/title>\r\n<link rel=\"stylesheet\" href=\"\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.10.4\/themes\/smoothness\/jquery-ui.css\" \/>\r\n<script src=\"\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.0\/jquery.min.js\"><\/script>\r\n<script src=\"\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.10.4\/jquery-ui.min.js\"><\/script>\r\n\r\n<script src=\"autocomplete.kana.js\"><\/script>\r\n\r\n\r\n<style>\r\nbody {\r\n\tfont-family: 'Lucida Grande','Hiragino Kaku Gotdic ProN', Meiryo, sans-serif;\r\n\tfont-size: 62.5%;\r\n}\r\n.custom-combobox {\r\n\tposition: relative;\r\n\tdisplay: inline-block;\r\n}\r\n.custom-combobox-toggle {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tbottom: 0;\r\n\tmargin-left: -1px;\r\n\tpadding: 0;\r\n\t\/* support: IE7 *\/\r\n\t*height: 1.7em;\r\n\t*top: 0.1em;\r\n}\r\n.custom-combobox-input {\r\n\tmargin: 0;\r\n\tpadding: 0.3em;\r\n}\r\n<\/style>\r\n<script>\r\n$(function() {\r\n\t\/\/\u30b3\u30f3\u30dc\u30dc\u30c3\u30af\u30b9\u8a2d\u5b9a\r\n\t$( \"#combobox\" ).combobox();\r\n\r\n\t\/\/\u30bb\u30ec\u30af\u30c8\u8981\u7d20\u306e\u8868\u793a\u30fb\u975e\u8868\u793a\r\n\t$( \"#toggle\" ).click(function() {\r\n\t\t$( \"#combobox\" ).toggle();\r\n\t});\r\n});\t\r\n<\/script>  \r\n  \r\n<\/head>\r\n<body>\r\n<form action=\"test.php\" method=\"post\">\t\r\n\t<div class=\"ui-widget\">\r\n\t\t<label>\u540d\u524d\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044: <\/label>\r\n\t\t<select name=\"name\" id=\"combobox\">\r\n\t\t\t<option value=\"\" selected>\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044<\/option>\r\n\t\t\t<option value=\"\u6e05\u6c34\" data-kana=\"\u3057\u307f\u305a\">\u6e05\u6c34<\/option>\r\n\t\t\t<option value=\"\u7530\u4e2d\" data-kana=\"\u305f\u306a\u304b\">\u7530\u4e2d<\/option>\r\n\t\t\t<option value=\"\u9234\u6728\" data-kana=\"\u3059\u305a\u304d\">\u9234\u6728<\/option>\r\n\t\t\t<option value=\"\u5fd7\u6751\" data-kana=\"\u3057\u3080\u3089\">\u5fd7\u6751<\/option>\r\n\t\t\t<option value=\"\u4f50\u85e4\" data-kana=\"\u3055\u3068\u3046\">\u4f50\u85e4<\/option>\r\n\t\t<\/select>\r\n\t<\/div>\r\n\t<input type=\"submit\" value=\"\u9001\u4fe1\">\r\n<\/form> \r\n\r\n<hr>\r\n\r\n<button id=\"toggle\">select\u3092\u8868\u793a<\/button>\r\n \r\n \r\n<\/body>\r\n<\/html><\/pre>\n
(function( $ ) {\r\n\t$.widget( \"custom.combobox\", {\r\n\t\t_create: function() {\r\n\t\t\tthis.wrapper = $( \"<span>\" )\r\n\t\t\t.addClass( \"custom-combobox\" )\r\n\t\t\t.insertAfter( this.element );\r\n\t\t\t\r\n\t\t\tthis.element.hide();\r\n\t\t\tthis._createAutocomplete();\r\n\t\t\tthis._createShowAllButton();\r\n\t\t},\r\n\t\t\t\r\n\t\t_createAutocomplete: function() {\r\n\t\t\tvar selected = this.element.children( \":selected\" ),\r\n\t\t\tvalue = selected.val() ? selected.text() : \"\";\r\n\t\t\t\r\n\t\t\tthis.input = $( \"<input>\" )\r\n\t\t\t\t.appendTo( this.wrapper )\r\n\t\t\t\t.val( value )\r\n\t\t\t\t.attr( \"title\", \"\" )\r\n\t\t\t\t.addClass( \"custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left\" )\r\n\t\t\t\t.autocomplete({\r\n\t\t\t\t\tdelay: 0,\r\n\t\t\t\t\tminLength: 0,\r\n\t\t\t\t\tsource: $.proxy( this, \"_source\" )\r\n\t\t\t\t})\r\n\t\t\t\t.tooltip({\r\n\t\t\t\t\ttooltipClass: \"ui-state-highlight\"\r\n\t\t\t\t})\r\n\t\t\t\t.keypress(function(e) { \/\/enter\u30ad\u30fc\u3067\u306esubmit\u3092\u6291\u5236\r\n\t\t\t\t\tvar c = e.which ? e.which : e.keyCode;\r\n\t\t\t\t\tif (c == 13) { \r\n\t\t\t\t\t\te.preventDefault();\r\n\t\t\t\t\t} \r\n\t\t\t\t});\t\t\t\t\r\n\t\t\t\r\n\t\t\tthis._on( this.input, {\r\n\t\t\t\tautocompleteselect: function( event, ui ) {\r\n\t\t\t\t\tui.item.option.selected = true;\r\n\t\t\t\t\tthis._trigger( \"select\", event, {\r\n\t\t\t\t\t\titem: ui.item.option\r\n\t\t\t\t\t});\r\n\t\t\t\t},\r\n\t\t\t\t\r\n\t\t\t\tautocompletechange: \"_removeIfInvalid\"\r\n\t\t\t});\r\n\t\t},\r\n\t\t\r\n\t\t_createShowAllButton: function() {\r\n\t\t\tvar input = this.input,\r\n\t\t\twasOpen = false;\r\n\t\t\t\r\n\t\t\t$( \"<a>\" )\r\n\t\t\t\t.attr( \"tabIndex\", -1 )\r\n\t\t\t\t.attr( \"title\", \"Show All Items\" )\r\n\t\t\t\t.tooltip()\r\n\t\t\t\t.appendTo( this.wrapper )\r\n\t\t\t\t.button({\r\n\t\t\t\t\ticons: {\r\n\t\t\t\t\t\tprimary: \"ui-icon-triangle-1-s\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\ttext: false\r\n\t\t\t\t})\r\n\t\t\t\t.removeClass( \"ui-corner-all\" )\r\n\t\t\t\t.addClass( \"custom-combobox-toggle ui-corner-right\" )\r\n\t\t\t\t.mousedown(function() {\r\n\t\t\t\t\twasOpen = input.autocomplete( \"widget\" ).is( \":visible\" );\r\n\t\t\t\t})\r\n\t\t\t\t.click(function() {\r\n\t\t\t\t\tinput.focus();\r\n\t\t\t\t\t\r\n\t\t\t\t\t\/\/ \u4e00\u89a7\u304c\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u3068\u304d\u306f\u975e\u8868\u793a\u306b\r\n\t\t\t\t\tif ( wasOpen ) {\r\n\t\t\t\t\t\treturn;\r\n\t\t\t\t\t}\r\n\t\t\t\t\t\r\n\t\t\t\t\t\/\/ \u5168\u3066\u306e\u5024\u3092\u8868\u793a\u3002\u691c\u7d22\u6587\u5b57\u3068\u3057\u3066\u7a7a\u6587\u5b57\u3092\u6e21\u3059\r\n\t\t\t\t\tinput.autocomplete( \"search\", \"\" );\r\n\t\t\t\t});\r\n\t\t},\r\n\t\t\t\r\n\t\t\r\n\t\t_source: function( request, response ) {\r\n\t\t\tvar matcher = new RegExp( \"^\" + $.ui.autocomplete.escapeRegex(request.term), \"i\" ); \/\/\u524d\u65b9\u4e00\u81f4\r\n\t\t\tresponse( this.element.children( \"option\" ).map(function() {\r\n\t\t\t\tvar kana = $( this ).data('kana');\u3000\/\/\u304b\u306a\u540d\u3092\u53d6\u5f97\r\n\t\t\t\tvar text = $( this ).text(); \r\n\t\t\t\tvar value = $( this ).val();\r\n\t\t\t\tif ( this.value && ( !request.term || matcher.test(kana) ) ) \/\/\u5165\u529b\u6587\u5b57\u3068\u304b\u306a\u540d\u306e\u30de\u30c3\u30c1\r\n\t\t\t\treturn {\r\n\t\t\t\t\tlabel: text, \/\/\u4e00\u89a7\u8868\u793a\u6642\u306e\u5019\u88dc\u30e9\u30d9\u30eb\u540d\r\n\t\t\t\t\tvalue: value, \/\/\u5024(submit\u3067\u6e21\u3059\u5024)\r\n\t\t\t\t\toption: this\r\n\t\t\t\t};\r\n\t\t\t}) );\r\n\t\t},\r\n\t\t\t\r\n\t\t_removeIfInvalid: function( event, ui ) {\r\n\t\t\t\r\n\t\t\t\/\/ \u4f55\u3082\u9078\u629e\u3055\u308c\u3066\u3044\u306a\u3044\u3068\u304d\u306f\u96e2\u8131\r\n\t\t\tif ( ui.item ) {\r\n\t\t\t\treturn;\r\n\t\t\t}\t\t\t\r\n\t\t\t\r\n\t\t\t\/\/\u4e00\u81f4\u3092\u691c\u7d22\r\n\t\t\tvar value = this.input.val(),\r\n\t\t\tvalueLowerCase = value.toLowerCase(),\r\n\t\t\tvalid = false;\r\n\t\t\tthis.element.children( \"option\" ).each(function() {\r\n\t\t\t\t\/\/\u5927\u6587\u5b57\u5c0f\u6587\u5b57\u30c1\u30a7\u30c3\u30af\u3002\u65e5\u672c\u8a9e\u3060\u3068\u610f\u5473\u304c\u306a\u3044\u3002\u304b\u306a\uff1d\u30ab\u30ca\u30c1\u30a7\u30c3\u30af\u306b\u5909\u3048\u3066\u3082\u826f\u3044\u304b\u3082\r\n\t\t\t\tif ( $( this ).text().toLowerCase() === valueLowerCase ) {\u3000\r\n\t\t\t\t\tthis.selected = valid = true;\r\n\t\t\t\t\treturn false;\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t\t\r\n\t\t\t\/\/\u3000\u898b\u3064\u3051\u305f\u3089\u96e2\u8131\r\n\t\t\tif ( valid ) {\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\t\t\t\r\n\t\t\t\/\/ \u898b\u3064\u304b\u3089\u306a\u304b\u3063\u305f\u6642\u306e\u51e6\u7406\u3000\uff08\u7121\u52b9\u306a\u5024\u3092\u524a\u9664)\r\n\t\t\tthis.input\r\n\t\t\t\t.val( \"\" )\r\n\t\t\t\t.attr( \"title\", \"\u300c\" +\u3000value + \"\u300d\u306b\u4e00\u81f4\u3059\u308b\u5024\u306f\u898b\u3064\u304b\u308a\u307e\u305b\u3093\u3067\u3057\u305f\" )\r\n\t\t\t\t.tooltip( \"open\" );\r\n\t\t\t\tthis.element.val( \"\" );\r\n\t\t\t\tthis._delay(function() {\r\n\t\t\t\t\tthis.input.tooltip( \"close\" ).attr( \"title\", \"\" );\r\n\t\t\t\t}, 2500 );\r\n\t\t\tthis.input.data( \"ui-autocomplete\" ).term = \"\";\r\n\t\t},\r\n\t\t\r\n\t\t_destroy: function() {\r\n\t\t\tthis.wrapper.remove();\r\n\t\t\tthis.element.show();\r\n\t\t}\r\n\t});\r\n})( jQuery );\r\n\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
example \u5165\u529b\u3057\u305f\u300c\u3072\u3089\u304c\u306a\u300d\u3092\u5143\u306b\u540d\u524d(\u6f22…<\/p>\n","protected":false},"author":1,"featured_media":3472,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,22],"tags":[],"class_list":["post-3471","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-jquery","has-post-thumbnail-archive"],"_links":{"self":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/3471","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/comments?post=3471"}],"version-history":[{"count":0,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/3471\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/3472"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=3471"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=3471"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=3471"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}