rauchg / textboxlist Goto Github PK

MooTools tokenizer

PHP 3.46% JavaScript 96.54%

textboxlist's Introduction

TextboxList

TextboxList is great!

How to Use

TextboxList is essentially very easy to use, but is extremely configurable and extensible. Let’s review some sample usage scenarios:

#JS
new TextboxList('form_tags_input');

This turns the <input id="form_tags_input"> into a TextboxList widget. By default, as shown in the demo, the user can add new boxes by pressing enter, write between boxes, delete them with backspace and delete keys. Additionally, a delete button is shown in each of the added items. All these behaviors can be configured, as shown in the sections below.

#JS
var t = new TextboxList('form_tags_input');
t.add('Tag 1').add('Tag 2').add('Tag 3');

In this example we call the public add() method of the TextboxList instance to add items from JavaScript.

The anatomy of TextboxList

This section will be useful for those interested in customizing the default behavior of TextboxList, extending the main classes or writing their own plugins.

The parts that constitute a TextboxList widget are called bits. These parts have common characteristics: they can be focused, blurred, deleted, hidden, they are a fragment of the overall value, etc. TextboxList has two essential bits: the editable and the box bit.

Some options involved in the behavior and appearance of the widget are specific to the editable bits, and some are specific to the box bits, which are separate classes from TextboxList. To easily pass them from the main class, you use the bitsOptions property. For example, to disable the delete button in boxes bits, and use the shift key for adding items instead of the enter key:

#JS
new TextboxList('form_tags_input', {bitsOptions: {
    box: {deleteButton: false}, 
    editable: {addKeys: Event.Keys.shift}
}});

Knowing this gives you more customization power. If you want to target the blur event of any bit, attach a onBitBlur listener. If you want to target boxes, you can use onBitBoxBlur. You can see a complete list of options and events at the bottom of this page.

Screenshots

textboxlist's People

Contributors

Stargazers

Watchers

textboxlist's Issues

Items with special characters are being interpreted

Plaintext is being added to the page using .html() which results in special characters being interpreted. For example, adding <b>foo</b> will result in a bold entry.

Placeholder text without autocompletion

I would love to have the option to have the ability to specify placeholder in the non autocompletion enabled version of the TextboxList. Is there an easy way to get it done?

Adding Explicity z-index for Dropdown Bug

Adding an explicit z-index css attribute to handle the bug of dropdown appearing behind some other html elements.

diff --git a/Source/TextboxList.Autocomplete.css b/Source/TextboxList.Autocomple
index 9a6d865..bdd12b3 100644
--- a/Source/TextboxList.Autocomplete.css
+++ b/Source/TextboxList.Autocomplete.css
@@ -4,7 +4,7 @@
Purchase to remove copyright
*/

-.textboxlist-autocomplete { position: absolute; }
+.textboxlist-autocomplete { position: absolute; z-index: 1; }
.textboxlist-autocomplete-placeholder, .textboxlist-autocomplete-results { opac
.textboxlist-autocomplete-placeholder { padding: 5px 7px; }
.textboxlist-autocomplete-results { margin: 0; padding: 0; }

Duplicate Entries on removing a tagged item

Hi,

Using Jquery TextBoxList, i faced the following problem:

After delete a tagged item, auto completed showed all items including items has tagged.
Add duplicate tagged items because case 1 occur.

Seems like the remove bit event makes the tagged items out of sync. Kindly check, and fix.

Thanks.

Does not work in IE9

i've updated my mootools library to 1.3.1 as well.. that seems to fix all issues with the text fields other than the "values seeded on demand" text field.

Any thoughts?

Tags parsed and rendered as HTML

Tags that have been input are parsed and rendered as HTML, rather than being escaped. As entering valid HTML tags causes the tags to be marked up. Entering broken tags causes erratic formatting. And entering scripts causes them to be executed.

Examples:

<h1>test h1</h1>
<p
</input>
<img src=x onerror=alert(1)>

Result:

spinner.gif not working for me... or "please wait..." or "loading..."

need some type of notification that the search is in progress so users dont think something went wrong .. my db is very large and the query takes a few seconds to populate anything in the autocomplete pulldown.. i noticed that there is a spinner graphic in the images folder but i can't for the life of me figure out how or why i can't get it to work.
any help please?

thanks!

Is there a way to have autocompletion to work with accented characters ?

Hi,

I use your very great TextboxList jquery plugin. It works well but I'm not able to get it work properly as soon as my values contains accented characters.

I generate my values using PHP. I have tried with both options (see below) without success so I guess the problem is how it getting read by the javascript part.

echo json_encode($response, JSON_UNESCAPED_UNICODE);

generates

[["étalement","étalement",null,"étalement "],["énergie","énergie",null,"énergie"]]

echo json_encode($response);

"[["\u00e9talement","\u00e9talement",null,"\u00e9talement"],["\u00e9nergie","\u00e9nergie",null,"\u00e9nergie"]]

Any help would be welcome. Thanks in advance and thanks again for your plugin.

unable to get property 'createRange' of undefined or null reference

File: TextboxList.js
Line# 411

var r = document.selection.createRange().duplicate();

I'm getting this error only in IE11

unable to get property 'createRange' of undefined or null reference

Since IE 11 has ended the support for the function document.selection

it says

[selection is no longer supported. Starting with Internet Explorer 11, use getSelection. For info, see Compatibility changes.]

can't re add

js code:

var t = new TextboxList('form_tags_input', {unique: true});

$$('.common').addEvent('click', function(e){
t.add(e.target.get('text'));
});

html code:

aaaaa
bbbbb
ccccc

bug:

when your add "aaaaa",and remove "aaaaa",you can't re add "aaaaa",it does't work.

only you SELECT it before you remove,that is work

No clear functionality

It would be nice to be able to clear the box. Here is a function to do that

/**
 * Clear the box and return all the values that where cleared
 */
var clear = function() {
    element.val('')
    var values = [];
    list.children().each(function(){
        var bit = getBit(this);
        if (!bit.is('editable')) values.push(bit.remove());
    });
   return values;
}

ENHANCEMENT: when Max=1, the only BitBox takes the whole space of the Textbox

I tried adding a listener of "onBitBoxAdd" to check if this.options.Max = 1, then appending a new class name (i.e. .textboxlist-bit-box-singleEntry which sets "float:none"; ) and leaving the current Textbox without creating any new bitEditable. (and continuing to do something else, like fetching data and filling up a form, in my case.)

However my code was never good to make such thing happen. I'm wondering if my direction is correct and if there's any better way to do it.

Thanks.

editable: {addKeys: 188} not working in combination with autocomplete

I was not able to use custom keys to add tags in combination with the autocomplete feature.
This works to set a comma as a tag separator
var input1 = new TextboxList('input1', {
bitsOptions:{editable: {addKeys: 188}}
});

Using autocomplete breaks it, only return/enter is working
var input2 = new TextboxList('input2', {
plugins: {autocomplete: {
minLength: 1,
placeholder: 'Hint Text',
queryRemote: true,
remote: { url: '' }
}},
bitsOptions:{editable: {addKeys: 188}}
});