javascript - Jquery autocomplete for input form, using Textpattern category list as a source - Stack Overflow

admin管理员组

文章数量:1426086

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 autoplete from the available categories, passing the required option's value into the appropriate database field.

I've seen several autoplete 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 autoplete mechanism in a text-type input element? How would I do that?

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 autoplete from the available categories, passing the required option's value into the appropriate database field.

I've seen several autoplete 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 autoplete mechanism in a text-type input element? How would I do that?

• javascript
• jquery
• autoplete
• webforms
• textpattern

Share Improve this question Follow edited Mar 4, 2009 at 19:26 GEOCHET 21.3k1515 gold badges7777 silver badges9999 bronze badges asked Mar 4, 2009 at 19:23 John StephensJohn Stephens 81122 gold badges1313 silver badges2020 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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 autoplete plugin like this one :

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

Check the autoplete 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, autoplete css & js, code for your page) :

<link rel="stylesheet" type="text/css" href="jquery.autoplete.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autoplete.js">
</script>
<script type="text/javascript">
    $(function()
    {
        // Updated script
        var categories = $.map($("#mySelectId option"),
            function(e, i) { return e; });
        $("#myTextBoxId").autoplete(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 ment if you have a question. EDIT : I DID test, but not with 5k items in my select ;)

You can set up the autoplete 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 autoplete 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 Autoplete:
[
    <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 autoplete with:

$("#example").autoplete("<txp:link_to_home />Autoplete");

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 Autoplete so that whenever a new character is entered/removed, autoplete is reloaded with the new search string.

本文标签：