{"id":3605,"date":"2010-01-13T04:08:29","date_gmt":"2010-01-13T03:08:29","guid":{"rendered":"http:\/\/www.chipwreck.de\/blog\/?page_id=3605"},"modified":"2016-12-31T02:41:38","modified_gmt":"2016-12-31T01:41:38","slug":"help","status":"publish","type":"page","link":"https:\/\/www.chipwreck.de\/blog\/software\/cwcomplete\/help\/","title":{"rendered":"CwComplete &#8211; Help"},"content":{"rendered":"<div class=\"contentnavi\">\n<p class=\"contentnav1 center\">\n<a href=\"\/blog\/software\/cwcomplete\/\">About \/ Feedback<\/a> &bull;<br \/>\n<a href=\"\/blog\/software\/cwcomplete\/demo\">Demo<\/a> &bull;<br \/>\n<span class=\"pink\">Help \/ Download<\/span>\n<\/p>\n<\/div>\n<p><a name=\"help1\"><\/a><\/p>\n<h3>Requirements<\/h3>\n<ul>\n<li>Works in Safari 3+, Firefox 3+, Chrome 3+, IE 6, IE 7, IE 8 and Opera 9+<\/li>\n<li>Requires mootools 1.23+ Core<\/li>\n<\/ul>\n<h3>Download<\/h3>\n<p><a class=\"download imgshadow action external\" href=\"http:\/\/mootools.net\/forge\/p\/cwcomplete\">Download at Mootools Forge &raquo;<\/a><\/p>\n<h5>Comments? Problems? Feedback? <a href=\"\/blog\/software\/cwcrop\/#respond\"> Leave a comment &raquo;<\/a><\/h5>\n<p>GitHub Repository: <a class=\"external\" href=\"https:\/\/github.com\/mariofischer\/cwcomplete\">github.com\/mariofischer\/cwcomplete &raquo;<\/a><\/p>\n<p class=\"toplink\"><a href=\"#top\">&#x21e7; top<\/a><\/p>\n<h3>Documentation<\/h3>\n<p><a name=\"help2\"><\/a><\/p>\n<h5>General information<\/h5>\n<p>On initialization you provide the id of an input field and an URL (to use Ajax) or a javascript-function (which returns the values).<\/p>\n<p>As soon as the user types more than 2 characters (configurable) the values are being fetched &mdash; either via javascript or via Ajax (like: <kbd>yourscript.php?search=whatusertyped)<\/kbd>.<\/p>\n<p>The Ajax script has to deliver a JSON-formatted array (see below), consisting of keys and values. Values are the possible completions, keys are what you usually expect in the form (an id for example)<\/p>\n<h5>Usage<\/h5>\n<ul>\n<li>This autocomplete tool takes a text input field and fetches a list of possible completions<\/li>\n<li>The list of completions is shown in a layer below the input field, the user can choose an item via keyboard (up\/down\/enter) or by clicking<\/li>\n<li>If the user selects an item, the <em>key<\/em> of this item is written into a field, usually a hidden form field<\/li>\n<li>You can provide additional action via the onChoose()-event<\/li>\n<\/ul>\n<h5>Javascript Code<\/h5>\n<pre lang=\"javascript\">\r\nvar ac = new CwAutocompleter( 'autoinput1' \/* ID of the input field *\/ , 'http:\/\/yourserver.com\/ajax.php', \/* URL of backend ajax script *\/\r\n{\r\n\ttargetfieldForKey: 'country_code', \/* The ID of the field where the selected key goes *\/\r\n\tonChoose: function(selection) {\r\n\t\talert(\"You selected: \" + selection.value + \" (\" + selection.key + \")\");  \/* Optional function to execute on user selection *\/\r\n\t}\r\n)\r\n});\r\n<\/pre>\n<h5>Parameters<\/h5>\n<ul>\n<li><strong>inputfield<\/strong>: ID of the input field<\/li>\n<li><strong>url<\/strong>: URL of the Ajax script to call (leave empty if you use javascript instead of Ajax)<\/li>\n<\/ul>\n<h5>Options<\/h5>\n<ul>\n<li><strong>ajaxMethod<\/strong>: <em class=\"small\">get<\/em> How to call the ajax script, via get or post<\/li>\n<li><strong>ajaxParam<\/strong>: <em class=\"small\">search<\/em> Name of the parameter which is sent to the ajax script<\/li>\n<li><strong>inputMinLength<\/strong>: <em class=\"small\">3<\/em> Number of characters entered after which the auto complete starts<\/li>\n<li><strong>pause<\/strong>: <em class=\"small\">0<\/em> Milliseconds to wait before ajax autocomplete kicks in (wait until user stopped typing), 0 = immediately<\/li>\n<li><strong>targetfieldForKey<\/strong>: (optional) An element id into which the user selected key is written<\/li>\n<li><strong>targetfieldForValue<\/strong>: (optional) An element id into which the user selected value is written. Leave empty to use the input field therefore<\/li>\n<li><strong>suggestionBoxOuterClass<\/strong>: <em class=\"small\">cwCompleteOuter<\/em> css-classname, change if necessary<\/li>\n<li><strong>suggestionBoxListClass<\/strong>: <em class=\"small\">cwCompleteChoices<\/em> css-classname, change if necessary<\/li>\n<li><strong>suggestionBoxLoadingClass<\/strong>: <em class=\"small\">cwCompleteLoading<\/em> css-classname, change if necessary<\/li>\n<li><strong>suggestionBoxHoverClass<\/strong>: <em class=\"small\">cwCompleteChoicesHover<\/em> css-classname, change if necessary<\/li>\n<li><strong>clearChoicesOnBlur<\/strong>: <em class=\"small\">true<\/em> whether to clear choices when the container loses focus<\/li>\n<li><strong>clearChoicesOnEsc<\/strong>: <em class=\"small\">true<\/em> whether to clear choices when the container loses focus via esc<\/li>\n<li><strong>clearChoicesOnChoose<\/strong>: <em class=\"small\">true<\/em> whether to clear choices when a value is chosen<\/li>\n<li><strong>setValuesOnChoose<\/strong>: <em class=\"small\">true<\/em> whether to set values when a choice is selected<\/li>\n<li><strong>suggestionContainer<\/strong>: <em class=\"small\">{}<\/em> an existing element which contains the suggestions (optional)<\/li>\n<li><strong>choiceContainer<\/strong>: <em class=\"small\">ul<\/em>  the element used to encapsulate all choices<\/li>\n<li><strong>choiceElement<\/strong>: <em class=\"small\">li<\/em> the element used to encapsulate the actual choice text<\/li>\n<\/ul>\n<h5>Events<\/h5>\n<ul>\n<li><strong>onChoose<\/strong> &#8211; Triggered if the user selects an item, parameter is an object with &#8220;key&#8221; and &#8220;value&#8221;<\/li>\n<li><strong>doRetrieveValues<\/strong> &#8211; Optional function to provide the values<\/li>\n<\/ul>\n<h5>Format of the ajax response<\/h5>\n<p>The response is a JSON-encoded array of two-element arrays containing the <em>key<\/em> and the <em>value<\/em>.<\/p>\n<p><p class=\"small\">The key is for example a country-code and the value is the country name in English.<\/p>\n<h5>Providing the response (PHP-example):<\/p>\n<h5>\n<pre lang=\"php\">\r\n$values = array(\r\n\tarray('de','Germany'),\r\n\tarray('fr','France'),\r\n\tarray('us','United States'),\r\n\tarray('uk','United Kingdom'),\r\n);\r\n\r\nheader('Content-type: application\/json'); \r\necho json_encode($result);\r\n<\/pre>\n<h5>Providing values via Javascript<\/h5>\n<p>You can provide the values also via a javascript function. This function receives the user input as parameter (so you can build your list of possible matches), and it returns a two-dimensional array of keys\/values. Here is an example:<\/p>\n<pre lang=\"javascript\">\r\nvar ac = new CwAutocompleter( 'autoinput' , '',\r\n{\r\n\ttargetfieldForKey: 'any_id', \r\n\tonChoose: function(selection) {\r\n\t\talert(\"You selected: \" + selection.value + \" (\" + selection.key + \")\");\r\n\t},\r\n\tdoRetrieveValues: function(input) {\r\n\t\treturn [['1','example'], ['2','something else']];\r\n\t}\r\n});\r\n<\/pre>\n<p class=\"small\">Note that this example always provides the same two values, in real life you would match <kbd>input<\/kbd> against a list of possible choices.<\/p>\n<h3>FAQ<\/h3>\n<ul>\n<li class=\"question\">Why another autocompletion tool?<\/li>\n<li class=\"answer\">\n<p>This is a quick and simple tool, in many cases sufficient. If you need more options and possibilities there are other (more advanced and proven) tools.<\/p>\n<\/li>\n<li class=\"question\">How do I return only matching values via Javascript?<\/li>\n<li class=\"answer\">\n<p>A good method would be to use <kbd>\"Array.filter\"<\/kbd> from Mootools, but it depends on your requirements<\/p>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>About \/ Feedback &bull; Demo &bull; Help \/ Download Requirements Works in Safari 3+, Firefox 3+, Chrome 3+, IE 6, IE 7, IE 8 and Opera 9+ Requires mootools 1.23+ Core Download Download at Mootools Forge &raquo; Comments? Problems? Feedback? Leave a comment &raquo; GitHub Repository: github.com\/mariofischer\/cwcomplete &raquo; &#x21e7; top Documentation General information On initialization &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.chipwreck.de\/blog\/software\/cwcomplete\/help\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;CwComplete &#8211; Help&#8221;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":3595,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-3605","page","type-page","status-publish","hentry"],"jetpack_shortlink":"https:\/\/wp.me\/PaPEN-W9","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/pages\/3605","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/comments?post=3605"}],"version-history":[{"count":0,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/pages\/3605\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/pages\/3595"}],"wp:attachment":[{"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/media?parent=3605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}