After a user has selected a value from an autocomplete list (Using jQuery autocomplete), I need to remove everything from the input box after the first space.
I got this far then got a bit lost. (currently just alerts on blur)
<script>
$(function() {
$( ".pn-autocomplete" ).autocomplete({
source: "pn-json.php",
minLength: 2,
}).blur(function () {
alert($(this).val());
});
});
</script>
Demo
Check this code snippet - It would skip all the text after the first space.
$(function () {
$( ".pn-autocomplete" ).autocomplete({
source: "pn-json.php",
minLength: 2,
}).blur(function () {
$(this).val(function () {
return this.value.split(' ')[0];
});
});
});
You can update the value to the first word like this,
<script>
$(function() {
$( ".pn-autocomplete" ).autocomplete({
source: "pn-json.php",
minLength: 2,
}).blur(function () {
var input_val = $(this).val(),
first_word = input_val.replace(/(\w+).*/,"$1");
$(this).val(first_word);
});
});
</script>
Related
jQuery is new to me, thanks for bearing with me.
I have some text inputs in HTML:
<input type="text" class="NameTextID" id="fn.1">
<input type="text" class="NameTextID" id="ln.1">
<input type="text" class="EmailAddressTextID" id="ea.1">
Two inputs are of class NameTextID and one is of class EmailAddressTextID. Notice each id is unique.
I then would like to leverage jQuery's autocomplete function on any DOM item with a class from above.
$(document).ready(function() {
$(function() {
$( ".NameTextID" ).autocomplete({
source: recEngineNames,
minLength: recMinCharCount,
select: recEngine
});
$( ".EmailAddressTextID" ).autocomplete({
source: recEngineEmails,
minLength: recMinCharCount,
select: recEngine,
});
});
});
Now, in the function recEngine:
var recEngine = function(event, ui) {
var selected_value = ui.item.value
var selected_id = ????
}
jQuery passes two parameters, how can I obtain the id if the ui item that activated the recEngine function?
Thanks in advance!
You can just do:-
var selected_id = this.id;
where this refers to the current element being referred to.
You can acces it like this:
ui.item.id
First thing you can use multi selectors by separating by a comma ','.
Then to get the element where that fired the event you can use the key word this or event.target.
To get its id you can use $(event.target).attr('id')
$(event.target).attr('id')
$(document).ready(function() {
$(function() {
$( ".NameTextID, .EmailAddressTextID" ).autocomplete({
source: recEngineNames,
minLength: recMinCharCount,
select: recEngine
});
});
});
var recEngine = function(event, ui) {
var selected_value = ui.item.value;
var selected_id = $(event.target).attr('id');
}
I am using the jQuery autocomplete to with a list of 800 values
j$(function() {
var availableTags = [item1,item2, item3,...];
j$( "#stdcodes" ).autocomplete({
source: availableTags
});
});
This works fine, what i want to do is limit or validate that the input in one the autocomplete values.
Can anyone help with this?
Try something like this:
$("#stdcodes").autocomplete({
open: function(e) {
valid = false;
},
select: function(e){
valid = true;
},
close: function(e){
if (!valid) $(this).val('');
},
source: availableTags
});
$("#stdcodes").change(function(){
if (availableTags.indexOf($(this).val()) == -1){
$(this).val("");
}
});
Added extra validation, in case autocomplete doesn't execute
Fiddle:
http://jsfiddle.net/Ra96R/2/
Try use this way:
$("#stdcodes").autocomplete({
source: function (request, response) {
/* apply validation on request.term: */
var localResults = $.ui.autocomplete.filter(localArray, extractLast(request.term));
response(localResults);
}
});
Can it?
$("#my_input").autocomplete({
source: function (request, response) {
if ($.trim(request.term).length > 0) {
// THIS MY REQUEST
}
}
})
I'm using selectable() from jQuery it works just the way i want it.
But i want to go to the next step, i want it to select the message too inside the main chat.
So the text of the selected nickname will highlight too in the main chat.
JsFiddle http://jsfiddle.net/56SkH/13/
UPDATE
What i wanna to do is that when Nickname is selected from users that the channelmessage automaticly is being selected from the users.
$(function() {
$('#users').selectable({
selected: function(event, ui) {
var user = ui.selected.id.toLowerCase();
$('.channelmessage.'+user).addClass('ui-selected');
},
unselected: function(event, ui) {
$('.channelmessage').removeClass('ui-selected');
},
});
});
DEMO: http://jsfiddle.net/56SkH/23/
Try this - On click of each name corresponding message also selected using 'stop' property of selectable().
$(function () {
$("#users").selectable({
stop: function () {
$("#users li").each(function (key) {
$("#Nickname" +(key+1)+ "_message").css({"background":"white","color":"black"});
});
$(".ui-selected", this).each(function (key) {
var index = $( "#users li" ).index( this );
$("#Nickname" +(index + 1)+ "_message").css({"background":"#F39814","color":"white"});
});
}
});
});
It's easy to add a dummy class to each chat message, and the selector will be more efficient than searching for a name string.
$(function() {
$( '#users').selectable({
filter: "li",
selecting: function( event, ui ) {
$(".ui-selected").removeClass("ui-selected");
$('.channelmessage span.message.' + ui.selecting.id).addClass("ui-selected");
}
});
});
Here you have a working JSFiddle sample:
http://jsfiddle.net/56SkH/21/
You can force the selection on the element by adding the class ui-selected and using the selected event:
$(function () {
$('#users').selectable({
selected: function (event, ui) {
$(".channelmessage span.nickname.ui-selected").removeClass("ui-selected");
$(".channelmessage span.nickname:contains('" + ui.selected.id + "')").addClass("ui-selected");
}
});
});
In the example I use the span content as contains selctor, by I have modified a bit the HTML markup like:
<p class="channelmessage"> <span class="nickname">Nickname2</span><span>:</span>
<span class="message">Message</span>
</p>
Demo: http://jsfiddle.net/IrvinDominin/LnnLT/
okay iM using jquery autocomplete and Everything works fine but I want it to trigger the search button when a suggestion is selected. the code i have is this.
$( "#tags" ).autocomplete({
source: availableTags
select: function (event, item)
{
if (event.keyCode == 13){
$('#IDofMYform').submit()
}
}
});
});
You should set the value to the form input before submitting. If you don't, your form is submitted before it has a chance to populate the input.
Something like :
$("#tags").autocomplete({
source: availableTags
select: function (event, ui) {
//Set the value
$(this).val(ui.item.value);
// Submit the form
$('#IDofMYform').submit();
}
});
Hi I'm trying to implement some JQuery to use the Autocomplete UI. I have a drop down list with two options. Actor and Film. Depending on what is selected, I would like the source for the autocomplete input box to be different. Is there anything wrong with the JQuery I have?
<script type="text/javascript">
$(document).ready(function(){
$("#selectType").change(function() {
if ($(this).val() == "Actor"){
$("#tags").autocomplete({
source: "nameSearch.php",
minLength: 2
});
}
else if($(this).val() == "Film"){
$("#tags").autocomplete({
source: "FilmSearch.php",
minLength: 2
});
}
});
});
</script>
Use like this:
$(document).ready(function () {
//Create widget with default data source
$("#tags").autocomplete({
source: "nameSearch.php",
minLength: 2
});
$("#selectType").change(function () {
// Assign new data source like that :
if ($(this).val() == "Actor")
$("#tags").autocomplete("option", "source", "nameSearch.php");
else
if ($(this).val() == "Film")
$("#tags").autocomplete("option", "source", "FilmSearch.php");
// And what is your 2 conditions are not met?????
});
});