Jquery autocomplete for input form, using Textpattern category list as a source

Question

I'm using the Textpattern CMS to build a discussion site-- I have a firm grasp of XHTML and CSS, as well as Textpattern's template language, but PHP and Javascript are a bit beyond my cunning.

On the input form to begin a new topic, users need to select a category from a list of over 5,000 options. Using the HTML select-type input element is very unwieldy, but it works. I would like to use some kind of Javascript magic to display a text-type input element that will read user input and display matches or autocomplete from the available categories, passing the required option's value into the appropriate database field.

I've seen several autocomplete plugins for jquery, but the instructions presuppose that you understand how Javascript works.

As I mentioned above, it's easy for me to generate the category list as a select-type input element, and I can hide that element using CSS. Is it possible to control select-list input using an autocomplete mechanism in a text-type input element? How would I do that?

Answer 1

EDIT : Updated to put option.value in a hidden field

Yes, it is possible. For example, if you have the following html code :

<input type="text" id="myTextBoxId"></input>
<!-- added hidden field to store selection option value -->
<input type="hidden" id="myHiddenField" name="selectedCategory"></input>
<select id="mySelectId" style="display: none">
    <option>Category 1</option>
    <option>Category 2</option>
    <option>...</option>
</select>

You can use following jquery code to put this data in an array :

var categories = $.map($("#mySelectId option"), function(e, i)
{
    return e; // Updated, return the full option instead its text
});

And finally, you can use an autocomplete plugin like this one :

$("#myTextBoxId").autocomplete(categories,
{
    formatItem : function(item) { return item.text; } // Added
});

Check the autocomplete plugin demo page to see what options you can use (like autoFill and mustMatch).

All you have to do is put this in your html header (jquery js, autocomplete css & js, code for your page) :

<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js">
</script>
<script type="text/javascript">
    $(function()
    {
        // Updated script
        var categories = $.map($("#mySelectId option"),
            function(e, i) { return e; });
        $("#myTextBoxId").autocomplete(categories,
        {
            formatItem : function(item) { return item.text; }
        });
        // Added to fill hidden field with option value
        $("#myTextBoxId").result(function(event, item, formatted)
        {
            $("#myHiddenField").val(item.value);
        }
    });
</script>

Ok, it's only a few lines of code, but I don't really like the "select to array" stuff. If possible, you should create a page that that returns a list of categories matching user input (again, check the demo page for examples, unfortunatly, I can't help you much with Textpattern).

Of course, I didn't test, just put a comment if you have a question. EDIT : I DID test, but not with 5k items in my select ;)

Answer 2

You can set up the autocomplete to take its data from a URL, so I can see this being used in a couple nifty ways with Textpattern.

The array format that autocomplete uses looks like this:

["example_one", "example_two", ... ]

Since you have 5000+ elements, you might want to create a page that simply lists them using that format:

Page Autocomplete:
[
    <txp:article_custom form="array_form" ... />
]

Form array_form:
"<txp:title />",

To use this page instead of including all the items in a select field, you'd set up your autocomplete with:

$("#example").autocomplete("<txp:link_to_home />Autocomplete");

You can use a caching plugin to speed up loading.

To speed things up even more, you could use the Textpattern search function with a custom display page instead of using a full listing. There may be a way to set up Autocomplete so that whenever a new character is entered/removed, autocomplete is reloaded with the new search string.