jquery/javascript tokeninput

Question

I updated the code and the focus is working now only problem is how do I get teh phone number that the user entered and plug it infront of the text in the inputfield called "id="some-text"?

<input id="some-text"  type="text" value=" some text goes here" />  





     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Auto complete</title>

     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript" src="src/jquery.tokeninput.js"></script>

        <link rel="stylesheet" href="styles/token-input.css" type="text/css" />
        <link rel="stylesheet" href="styles/token-input-facebook.css" type="text/css" />

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

$.fn.setCursorPosition = function(position){
    if(this.lengh == 0) return this;
    return $(this).setSelection(position, position);
}

$.fn.setSelection = function(selectionStart, selectionEnd) {
    if(this.lengh == 0) return this;
    input = this[0];

    if (input.createTextRange) {
        var range = input.createTextRange();
        range.collapse(true);
        range.moveEnd('character', selectionEnd);
        range.moveStart('character', selectionStart);
        range.select();
    } else if (input.setSelectionRange) {
        input.focus();
        input.setSelectionRange(selectionStart, selectionEnd);
    }

    return this;
}

$.fn.focusEnd = function(){
    this.setCursorPosition(this.val().length);
}





    $(document).ready(function() {
    $('.num-block').hide();
    $('.addnum').click(function() {
      $('.num-block').slideToggle("slow");


    });
    });


    $(document).ready(function() { 
 $('#button1').click(function() {
         //$('#some-text').focus();

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


      });

 </script>

    <style type="text/css">
     .num-block { bordeR:1px solid #000; width:700px;margin-top:40px;}
    </style>
</head>

<body>


                    <div class="block-1"> 
                     <!-- dependents information -->     
                     <input id="some-text"  type="text" value=" some text goes here" />                    
                                <a href="#"  class='addnum adddel'><span>Add Number</span></a>



                               <div class="num-block">

                                <!--  phone -->
                                 <div>
                                  Enter Phone:<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>


                                <!--- End Phone --> 


                                </div>


                                </div>

                    </div>

</body>
</html>

Answer 1

One problem is you spelled length as legth

if (this.lengh == 0)

Should be:

if(this.length == 0)

jquery/javascript tokeninput

Question

1 answers

solution1
1 2012-07-27 21:56:02

jquery/javascript tokeninput

Question

1 answers

solution1 1 2012-07-27 21:56:02

solution1
1 2012-07-27 21:56:02