Develop Reference

Jquery autocomplete with response, as filter function

Below i have some code, which works strange, i mean, it does nothing, i think that :contains function has some issue
$(".search").autocomplete({
source: availableTags,
appendTo: ".autocomplete",
minLength:3,
response: function(event, ui) {
var content = ui.content[0].label;
$.each($('.auto-sort'), function() {
var t = $(this);
if (("t:contains(content)")) {
return;
} else {
$(this).parent().parent().parent().hide();
}
});
},
});
Mainly, nothing happens when i type something in input field. I want to have items, that have part of content var in text.
If i reverse some lines of code, this code filters all items:
$(".search").autocomplete({
source: availableTags,
appendTo: ".autocomplete",
minLength:3,
response: function(event, ui) {
var content = ui.content[0].label;
$.each($('.auto-sort'), function() {
var t = $(this);
if (("t:contains(content)")) {
$(this).parent().parent().parent().hide();
} else {
return;
}
});
},
});
Now this above works, but it selects all items, for example if i type "tes" to input fields, all .auto-sort items are hidden, but those which don't contain content text, shoudl be visible.
Where is the problem?
Thanks for help.

The key to sorting, is to change filter logic to:
if($(this).is(':contains('+content+')')) {
Also, to make :containes case insensitive:
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
return function( elem ) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});

parsing input field contents on blur using jquery and autocomplete

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>

Execute function on option selected from jQuery ui autocomplete option list

Hi I have the code below for autocomplete which works fine but my only issue is that when a user clicks on an option from the autocomplete list, it should trigger another function (doSomething()). This however is not being done. Granted if the user makes a selection and presses "enter" the function is executed.
var url = "http://myURL";
var field = "myField";
$(document).ready(function () {
$("#tags").autocomplete({
source: function (req, add) {
var suggestions = search(req.term, url, field);
add(suggestions);
},
select: function( event, ui ) {
doSomething();
}
});
});
function search(value, listurl, field) {
var coll = new Array();
var url =
listurl + "?$filter=startswith(" + field + ",'" + value + "')";
$.ajax({
cache: true,
type: "GET",
async: false,
dataType: "json",
url: url,
success: function (data) {
var results = data.d.results;
for (att in results) {
var object = results[att];
for (attt in object) {
if (attt == field) {
coll.push(object[attt]);
}
}
}
}
});
return coll;}
function doSomething() {
}
Thanks for any suggestions.

Got this resolved like this:
$('#tags').on('keyup change', function () {
doSomething();
}).change();
$('#tags').on('autocompleteselect', function (e, ui) {
doSomething();
});
Thanks to this SO link

I know this is an old topic, but I came across this problem and I found another solution which I believe JQuery provides for. You can use the close event to do this.
Examples (extracted from http://api.jqueryui.com/autocomplete/ and adapted for this question):
1) When you initialize the autocomplete
$( "#tags" ).autocomplete({
close: function( event, ui ) { doSomething(); }
});
or
2) Binding an listener to the close event
$( "#tags" ).on( "autocompleteclose", function( event, ui ) { doSomething(); } );

jquery autocomplete suggestion trigger search button

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();
}
});

autocomplete source depending on drop down selection

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?????
});
});