Feedback on AutoCompletePlugin

-- AndrewRJones - 25 Jun 2007

Thanks alot for this beautiful plugin! It has very good performance, I think.

But, I think I found a bug: When I try to use your plugin, I can always get good results in auto completion. But during input, after I decide on the correct input and press enter, it adds this string "null " after the word. E.g. I give "WebHome", it completes "WebHomenull " (notice also the whitespace at the end). Any ideas why this happens? This is the call I am making:

%AUTOCOMPLETE{ name="topiclist" datatopic="Sandbox.AutoCompletePluginTestData"  datasection="topiclist" size="20em" value="topics" }%

This is the list:

%STARTSECTION{"topiclist"}%
%TOPICLIST{"[\"$name\"]" separator=", " web="%URLPARAM{"web"}%"}%
%ENDSECTION{"topiclist"}%

-- MikkoLaakso - 10 Jul 2007

If I define the delimchar = "," , it replaces the "null " with ", ". The bug is probably near this place. I went around this by defining delimchar = " " (whitespace)

This is how to define a Jump box with the autocomplete-topiclist:

<form name="jumpForm" action="%SCRIPTURLPATH{"view"}%/%BASEWEB%/%BASETOPIC%">
%AUTOCOMPLETE{ name="topic" datatopic="Sandbox.AutoCompletePluginTestData"  datasection="topiclist" value="Jump" formname="jumpForm" class="twikiInputField patternFormFieldDefaultColor" onfocus="clearDefaultandCSS(this);" onblur="setDefaultText(this);" size="128px" }%
</form>

-- MikkoLaakso - 10 Jul 2007

Suggestion: make it possible to use custom input tags, like

onfocus="clearDefaultandCSS(this)" onblur="setDefaultandCSS(this)"

-- MikkoLaakso - 10 Jul 2007

Thanks Mikko for the bug and feedback. Tracking the bug in Bugs:Item4345 and adding javascript parameters in Bugs:Item4346.

-- AndrewRJones - 11 Jul 2007

I have uploaded the new version with the bug fix and the ability to add javascript parameters. Mikko, if you get the jump box in the top bar working with auto complete and with the same layout, could you post the contents of TWiki.WebTopBar here? I can then add this to the documentation. Thanks.

-- AndrewRJones - 11 Jul 2007

Thanks Andrew for creating this plugin that enhances the Tag:usability!

-- PeterThoeny - 14 Jul 2007

I believe IfStatements has a bug, that won´t allow me to create a WebTopBar that would fall back gracefully if AutoCompletePluginEnabled is not set. Here is what I tried:

%IF{ "context AutoCompletePluginEnabled" then="$percntAUTOCOMPLETE{ name=\"topic\" datatopic=\"$percntTWIKIWEB$percnt.AutoCompletePageList\"  datasection=\"topiclist\" value=\"$percntMAKETEXT{\"Jump\"}$percnt\" form=\"topiclistform\" delimchar=\" \" size=\"10em\" class=\"twikiInputBox twikiInputBoxDefault\" onfocus=\"clearDefaultandCSS(this);\" onblur=\"setDefaultText(this);\" }$percnt" else=""}%

-- MikkoLaakso - 15 Jul 2007

Did you try $quot instead of escaped quotes?

-- ArthurClemens - 15 Jul 2007

Today, yes. But it won't help since IfStatements will not expand $percnt and $quot. It would be very useful if it did, though. There is even an example in the IfStatements that suggests it has this feature, but it actually doesnt.

-- MikkoLaakso - 17 Jul 2007

Maybe it would work if you used TWikiTemplates? That way I don't think you would need to escape any quotes.

-- AndrewRJones - 18 Jul 2007

That is a good idea actually- it should work.

-- MikkoLaakso - 26 Jul 2007

I'd like to use that plugin for auto-completing tags. I don't like the select box for tags and would rather have a text field where people can just type down sth. and then select sth. from the auto completion. If nothing matches their input the new tag will be created.

Has anyone any experiences with this?

-- MarijanaPrusina - 27 Jul 2007

Marijana, you may want to look at Bugs:Item3867, where Arthur Clemens raised the idea of auto-completing tags, though it doesn't look like there has been much activity there recently.

-- AndrewRJones - 27 Jul 2007

TagMePlugin code has been made ready for entry from a text field, but the corresponding interface has not been programmed yet (see Bugs:Item4135). It should be pretty straightforward: the "create new tag" screen already has a simple search on all tags that could be used as input for the auto-complete field.

-- ArthurClemens - 27 Jul 2007

There is a problem in XHTML that the plugin generates:

  (...)
        topicAC.useIFrame = false;
        topicAC.prehighlightClassName = "yui-ac-prehighlight";
        topicAC.typeAhead = false;
        topicAC.delimChar = " "
        topicAC.allowBrowserAutocomplete = false;
        topicAC.useShadow = false;
        topicAC.formatResult = function(item, query) { return item; };
    }

</script>
<input type="text" name="topic" value="Jump" onfocus="clearDefaultandCSS(this);" style="width:10em;" id="topicInput" class="twikiInputBox twikiInputBoxDefault autoCompleteInput" onblur="setDefaultText(this);" />
<div style="width:10em;" class="autoCompleteResults" id="topicResults" /></div>

In the last div, you can see that it is self-closing and it follows a closing div. This probably confuses IE pretty bad.

Filed a bug report on this: http://develop.twiki.org/~twiki4/cgi-bin/view/Bugs/Item4468

-- MikkoLaakso - 20 Aug 2007

Thanks Mikko for the bug report. A new version has been uploaded with the fix.

-- AndrewRJones - 22 Aug 2007

I would like to use this plugin for login screen. As in the example given with AutoCompleteAddOn

Did somebody test that ?

-- ThierryPasquier - 30 Mar 2008

This should work fine with the login screen. All you would need to do is adjust your TWikiTemplates.

-- AndrewRJones - 12 Sep 2008

Now that we are standardizing on JQueryPlugin instead of BehaviourContrib or YUI, we should base the AutoCompletePlugin on JQuery instead of YUI. There is a JQuery plugin for autocomplete, http://docs.jquery.com/Plugins/Autocomplete

-- PeterThoeny - 2010-06-30

Ping on this useful plugin. It would be good to have this plugin converted to jQuery.

As for syntax, I propose to simplify it substantially:

1. Simplify parameters:

• add a data="option 1, option 2, option 3" to define the options, either hard-coded or via a SEARCH.
• change size="" parameter from css Npx or Nem to number of characters (like text input field).
• possibly retire formname and itemformat.

2. TWikiForms: Instead of a complex form definition like:

-- PeterThoeny - 2011-02-24

+1 for the JQuery conversion and implementing a local data/SEARCH option.

-- CameronWood - 2012-02-19

I am currently writing some custom templates with in place editing, like that in the UserView template, and I would like to include AutoComplete functionality for my forms.

The code I have for the form is as below, but it breaks the form, is there another way I can preserve the formatting and include the AutoComplete field?

|  %MAKETEXT{"Test1"}%: | <input type="text" name="Title" value="%AUTOCOMPLETE{ name="Title" datatopic="Sandbox.DataRecordAutoComplete" datasection="DeviceVendor" formname="testform" size="128px" }%" size="36" class="twikiInputField" /> |
|  %MAKETEXT{"Test2"}%: | %AUTOCOMPLETE{ name="Title" datatopic="Sandbox.DataRecordAutoComplete" datasection="DeviceVendor" formname="testform" size="128px" }%" size="36" class="twikiInputField" }% |
|  %MAKETEXT{"Department"}%: | <input type="text" name="Department" value="%FORMFIELD{ "Department" topic="%TOPIC%" encode="html" }%" size="36" class="twikiInputField" /> |
|  %MAKETEXT{"Organization"}%: | <input type="text" name="Organization" value="%FORMFIELD{ "Organization" topic="%TOPIC%" encode="html" }%" size="36" class="twikiInputField" /> |
|  %MAKETEXT{"URL"}%: | <input type="text" name="URL" value="%FORMFIELD{ "URL" topic="%TOPIC%" encode="html" }%" size="36" class="twikiInputField" /> |

-- CameronWood - 2012-04-16

Three things:

1. The AUTOCOMPLETE generates in input tag, e.g. you get two nested input tags with your example.

2. Use unique names for AUTOCOMPLETE, this is required in order to make it work.

3. The plugin adds newlines, which break the table. Workaround: Use HTML table instead. Proper fix: Enhance the plugin with either an option to remove newlines, or hard-code the plugins to output all on one line.

-- PeterThoeny - 2012-04-16