Jquery Tokeninput how to get name instead of the id

Question

I tried calling that, but it doesn't seem to return anything.. Am I doing something wrong?

     <script type="text/javascript">
            $(document).ready(function() {
                $("input[type=button]").click(function () {
                    alert("Would submit: " + $(this).siblings("input[type=text]").val());
                });
            });


    $(document).ready(function() {
    $("#button1").click(function() {


                    var abc = $('#demo-input-local').tokenInput("get");
                    alert(abc);
                    alert(abc[7].name);

       var inputval =$(this).siblings("input[type=text]").val();
       alert("inputval " +inputval);

alert(abc[inputval].name);

      $("#some-text").focusEnd();

       $('#some-text').val($('#some-text').val()+'  ' + inputval);

    });
    });

            </script>

    <label> Enter Phone or Email or http: </label><input type="text" id="demo-input-local" name="blah" /><input type="button" id="button1" value="Submit" />
                                        <script type="text/javascript">
                                            $(document).ready(function () {
                                                $("#demo-input-local").tokenInput([
                                                { id: 7, name: "john.doe@uhc.com", "value": "@" , "prefix": "Email1"},
                                                { id: 11, name: "j.doe@uhc.com", "value": "@" ,"prefix": "Email2"},
                                                { id: 13, name: "nancy.doe@uhc.com", "value": "@" ,"prefix": "Email3"},
                                                { id: 17, name: "liz.d@uhc.com", "value": "@", "prefix": "Email4" },
                                                { id: 19, name: "joe.doe@uhc.com", "value": "@", "prefix": "Email5" },
                                                { id: 23, name: "www.C#.com", "value": "http", "prefix": "Website1" },
                                                { id: 29, name: "www.C.com", "value": "http", "prefix": "Website2" },
                                                { id: 31, name: "www.Fortran.com", "value": "http", "prefix": "Website3" },
                                                { id: 37, name: "www.VisualBasic.com", "value": "http", "prefix": "Website4" },
                                                { id: 41, name: "www.DoC.com", "value": "http", "prefix": "Website5" },
                                                { id: 43, name: "www.C++.com", "value": "http" , "prefix": "Website6"},
                                                { id: 47, name: "www.Java.com", "value": "http" , "prefix": "Website7"},  
                                                { id: 37, name: "111-111-1111", "value": "#", "prefix": "Phone1" },
                                                { id: 41, name: "222-222-2222", "value": "#", "prefix": "Phone2" },
                                                { id: 43, name: "333-333-3333", "value": "#" , "prefix": "Phone3"},
                                                { id: 47, name: "555-555-5555", "value": "#" , "prefix": "Phone4"}


                                             ], {
                                                 theme: "facebook",

                                                 propertyToSearch: "value",
                                                 hintText: "Type '@' for email or 'http' for website  or '#' for phone",
                                                 tokenFormatter: function (item) { return "<li><p>" +  item.prefix + "</p></li>" },
                                                 resultsFormatter: function (item) { return "<li>" + item.prefix +" "+ item.name + "</li>" }
                                             });
                                            });
                                        </script>
                                    </div>

You have completely edited over your original question user244394!! — Beetroot-Beetroot, Feb 10 '12 at 09:03

score 4 · Answer 1 · answered Feb 10 '12 at 02:37

4

Dear why not you use tokenInput's own method to get the object

selector.tokenInput("get");

This is how you Get the array of selected tokens from the tokeninput (each item being an object of the kind {id: x, name: y}). Further

 var abc = selector.tokenInput("get");
 abc[0].id; // for first array element
 abc[0].name

answered Feb 10 '12 at 02:37

Mujtaba Haider

1,650
2
19
29

I updated my code with your it doesnt seem to return any vale when i call abc[0].name Is there something I am missing? I posted my code above -thanks – user244394 Feb 10 '12 at 03:53
dear better you consult http://loopj.com/jquery-tokeninput/ tokenInput documentation again – Mujtaba Haider Feb 10 '12 at 06:58
Based on what ABC says, I have added some more code to my answer above that loops through the array returned by `.tokenInput("get");`. – Beetroot-Beetroot Feb 10 '12 at 20:57
Whoops, posted in wrong place, see my answer own answer. – Beetroot-Beetroot Feb 10 '12 at 21:16

Beetroot-Beetroot · Accepted Answer · 2012-02-10T21:00:09.460

If you just want to alert out a comma-separated list of names, try this:

javaScript:

$(document).ready(function() {
    $("input[type=button]").click(function() {
        var names = [];
        $(this).siblings("ul").find('li p').each(function(){
            names.push($(this).html());
            //names.push($(this).text());//possibly better
        });
        alert("Names are: " + names.join());
    });
});

But, as far as I can tell, the value actually submitted will still be a comma-separated list of ids.

Above is very raw approach. You could similarly loop through the array returned by the .tokenInput("get"); method pointed out by ABC.

On the assumption that what ABC says about .tokenInput("get"); is correct then this should work:

javascript:

$("input[type=button]").click(function() {
    var arr = $(this).siblings("input[type=text]").tokenInput("get");//Returns (we think) an array of objects
    var names = [];
    $.each(arr, function(i, obj){
        names.push(obj.name);//build an array of just the names
    });
    alert("Names are: " + names.join());
});

thanks f you see my code i was trying the .tokenInput("get"); but it didnt return anything var abc = selector.tokenInput("get"); abc[0].id; // for first array element abc[0].name ami missing something? — user244394, Feb 10 '12 at 15:29
Based on what ABC says, I have added some more code to my answer above that loops through the array returned by `.tokenInput("get");`. — Beetroot-Beetroot, Feb 10 '12 at 21:15

Jquery Tokeninput how to get name instead of the id

2 Answers2