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>
