I have the following function that adds a selector to a search input as an advanced option, just like stack overflows advanced search.
When you click what you are searching for it adds a prefix. See Jquery below:
<script>
$(document).ready(function () {
$("table#advanced_search_options tr").click(function () {
var SearchSelection = $(this).children("td:last-of-type").html();
var SearchInput = $('#Search');
SearchInput.val(SearchInput.val() + SearchSelection);
return false;
alert(SearchSelection);
});
});
</script>
How can I manipulate the above to also bring focus to the #search input, placing the carrot (the blinking text insert cursor) to the end of the inserted text/value? eg.
HC: <-- The added value to my search input, I would like to set the cursor here, right after the :
This question is related to
javascript
jquery
html
css
You can do this using Input.setSelectionRange
, part of the Range API for interacting with text selections and the text cursor:
var searchInput = $('#Search');
// Multiply by 2 to ensure the cursor always ends up at the end;
// Opera sometimes sees a carriage return as 2 characters.
var strLength = searchInput.val().length * 2;
searchInput.focus();
searchInput[0].setSelectionRange(strLength, strLength);
Demo: Fiddle
Source: Stackoverflow.com