CODEWITHSUNDEEP
javascriptcomboboxtagsw2ui
espace3d
espace3d

Reputation: 23

How to get the string in a combobox with w2ui?

I want to select or type a text in a combox with the frameworks w2ui. When i type on the key "Enter", i would get the value in the combobox to push this value in a array (see my addItem function in my code). I don't know how to access the string in the combobox ?

The documentation for this combo is here : http://w2ui.com/web/docs/1.5/form/fields-list

I have made a jsfiddle about what i'm trying to do here : https://jsfiddle.net/espace3d/bLughmy9/

This is for a simple todo list with tag.

<!DOCTYPE html>
<html>
<head>
<title>W2UI Demo: fields-3</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>

<div style="height: 10px"></div>
<div class="w2ui-field w2ui-span3">
    <label>Combo:</label>
    <div> <input type="combo"> <span class="legend">You can type any text</span> </div>
</div>
<div style="height: 20px"></div>
<style>
.w2ui-field input {
    width: 200px;
}
.w3ui-field > div > span {
    margin-left: 20px;
}
</style>

<script type="text/javascript">

var data={
description:["georges","henry"],
}

var addItem=function(item){
        console.log(item)
        data.description.push(item)
        data.description.sort();
}

$('input[type=combo]').w2field('combo', { 
items: data.description,
});

$( 'input[type=combo]' ).keypress(function(event) {
        if(event.key == 'Enter'){
        console.log( "Handler for .keypress() called." );
        /////////////////////////////////////////
        //WHAT I WANT TO DO
        //addItem(something)
        }
});
</script>
</body>
</html>

Upvotes: 0

Views: 661

Answers (2)

Code.king
Code.king

Reputation: 47

I had the same problem as you.

To address my problem, I got the JSON object item of the list and got its id or text in the COMBOBOX as follows.

$('#yourlistid').w2field().get().id
$('#yourlistid').w2field().get().text

Upvotes: 0

Mike Scotty
Mike Scotty

Reputation: 10782

You can access the w2field object by calling $element.w2field().

After that, you can access the content by calling get() on the w2field object.

Side note: get() may return an object, e.g. if your items are objects in the form { id: 123, text: "my text" }, which would be valid for w2ui combo box or list fields.

In your case, you can change the code as follows:

$( 'input[type=combo]' ).keypress(function(event) {
        if(event.key == 'Enter'){
            console.log( "Handler for .keypress() called." );
            var w2ui_field = $(this).w2field();
            var value = w2ui_field.get();
            addItem(value);
            w2ui_field.options.items = data.description;
        }
});

Note that you will have to re-assign the new items to the w2field options, if you want to display them in the combo box.

If you don't want that, you can ommit the w2ui_field.options.items = data.description; part.

Updated fiddle: https://jsfiddle.net/k548j0w1/

Upvotes: 0

Related Questions