We Keep Coding

jQuery Autocomplete a input field for a filter table

In my program, I have a table which I filter with an input field. You type something in the search/input field and the table gets filtered immediately without pressing enter.
Now I wanted to add autocomplete to this input field and it works but there is one problem. When I start typing something into the input field, I get suggestions. Now I can click on a suggestion and it gets written in the input field. That works just fine. But my table doesn't get filtered until I press enter and that's my problem. How do I make it that it automatically submits it/filters the table without pressing enter after selecting a suggestion?
Here are my two functions for the filtering and the autocomplete.
$("#searchInput").autocomplete({
source: availableTags, //array with all possible search results of the table
});
$(document).ready(function(){
$("#searchInput").on("keyup", function () {
var value = $(this).val().toLowerCase();
$("#contractTable tr").filter(function(){
$(this).toggle($(this).find(".target").text().toLowerCase().indexOf(value) > -1) // I only want to search for two specific cells of every row thats why I use find(".target")
});
});
});
I hope you get what I'm trying to achieve and on a side note I'm pretty new to JavaScript and jQuery so please have mercy with me :)

Here I fixed that for you:
https://jsfiddle.net/eakumopw/1/
Your Problem is you only hooked the filtering event to "keyup". But selecting a autocomplete suggestions is no key-up event. Adding another event won't solve the problem either because the suggestions-box is a different element.
I check which events jquery-autocomplete supports (http://tutorialspark.com/jqueryUI/jQuery_UI_AutoComplete_Events.php) and found the close() event to be the solution for me.
I outsourced the filtering process into a new function doFilter( value ) and made a call to that function on the close event of jquery-autcomplete.
$("#myInput").autocomplete({
source: availableTags,
close: function(event, ui) {
console.log("close");
doFilter($("#myInput").val().toLowerCase());
}
});

JQUERY Autocomplete (disable click selection)

HiAll,
I use a simply JQUERY Autocomplete to show possibles duplicates for certains records, like Name or address when user fill in a textfield.
Here code
<script type="text/javascript">
$(function() {
var availableTags = <?php include('ajax/ajax_show.php'); ?>;
$("#name_value").autocomplete({
source: availableTags,
autoFocus:true
});
});
</script>
Below text filed are displayes results.
Name[____________________]
Paul a
Robert b
Cid c
There is a way to disable selection?
I'm like to use autocomplete only to show records, but user cannot click to select anything.

You're probably going to confuse the user with this arrangement, since every other time he starts typing into a box and a list appears, the list will be a list of available options to select. You're changing the rules, and that doesn't make for the best UX. I would consider rethinking this.
That said, you can do what you want in the select option by calling preventDefault() in it:
$("#name_value").autocomplete({
source: availableTags,
autoFocus:true,
select: function(e, ui) {
e.preventDefault();
}
});

JQuery Autofill - Make Mandatory Selection

I used JQuery Autocomplete component to show the values from database. In this, the user can select the item by typing some text. In case, if the user not select any of the options shown below, the field is filled with value which user typed. But I want make that field such way that user can only select the value listed in Autocomplete. It should not contain any typed text. Is there any possible way to do it?

Yes possible.
1) Using change event you can clear the textbox values if no options are selected.
$("#tags").autocomplete({
source: availableTags,
change: function (event, ui) {
if (!ui.item) {
$(this).val("");
// Handle the error
}
}
});
JSFiddle
2) Not sure, have you been aware of [autocomplete-combo], this suits for your issue.(http://jqueryui.com/autocomplete/#combobox)

Why dont you try out Selectize
on that site Search for "Max Items" this will fulfill your requirment
It allow you to only select from whatever in the list

Fire method to fill detailsview control, from jquery autocomplete input

I have an input box for searching employee info (attached to a jquery autocomplete), and a box for employee number. The employee info queries multiple values (Lastname Firstname, Title, Clocknum) and returns them all as a string via the autocomplete. This is only if they dont know the clock number. The additional box is so they can search via clocknum as well.
Is there a way, to fire a method which populates a data control after clicking on or tabbing on the selected jquery autocomplete value?

using the select property of your autocomplete box:
updated after ekoz's comment
$('#lastName').autocomplete
({
source : "FormAutoComplete.ashx",
minChars : 3,
width : 325,
mustMatch: true,
select : function()
{
//jquery allows you to save several code lines
$('#txtClock').value(ui.item.value.substr(ui.item.value.length-5));
}
});
a complete read of jquery autocomplete's documentation should makes clear the code above http://jqueryui.com/demos/autocomplete/

How can I use the jQuery Autocomplete plugin for linked input fields?

I'm using the jQuery Autocomplete plugin. I have two input fields on a form, inputfield1 and inputfield2.
I attached autocomplete to the first field. When the that field loses focus, I want to check if a value was entered and if so, then make an AJAX call to retrieve some "\n"-separated strings and use them to drive autocomplete on the second field.
Below is the code I'm using to do that:
/*Receive data from server for autocomplete*/
$("#inputfield1").autocomplete("<url1>");
$("#inputfield1").blur(function(){
// Attach autocomplete if inputfield1 field is not empty
if($("#inputfield1").val() != ""){
var url = "<url2>?q="+$("#inputfield1").val();
$.get(url,function(data){
result=data.split("\n");
$("#inputfield2").autocomplete(result);
});
}
});
But a strange thing is happening: I am able to attach autocomplete to the first field successfully, but I have to give focus twice to the second field in order to use autocomplete on it. Is there any way to fix this problem?

Try this simplified test. If this works check if your result really contains what you think (alert it or write it to console). There could be other characters after splitting (namely whitespace (leading spaces, \t or \r) try trimming every value of the result array.
var data1 = ["a123", "b123", "c123", "d123", "e123", "f123", "g123", "h123", "i123", "j123", "k123", "l123", "m123", "n123", "o123", "p123", "q123", "r123", "s123", "t123", "u123", "v123", "w123", "x123", "y123", "z123"];
var data2 = 'a123\nb123\nc123\nd123\ne123\nf123\ng123\nh123\ni123\nj123\nk123\nl123\nm123\nn123\no123\np123\nq123\nr123\ns123\nt123\nu123\nv123\nw123\nx123\ny123\nz123';
$("#inputfield1").autocomplete(data1);
$("#inputfield1").blur(function(){
if($("#inputfield1").val() != ""){
var result=data2.split("\n");
$("#inputfield2").autocomplete(result);
}
});

I found this code in the current version of the autocomplete plugin:
.click(function(event) {
$(target(event)).addClass(CLASSES.ACTIVE);
select();
// TODO provide option to avoid setting focus again after selection? useful for cleanup-on-focus
input.focus();
return false;
It seems to put focus back on itself after a click. This might be messing you up.
Instead of handling the blur() event, maybe you'll have better luck if you handle the autocomplete plugin's result() event.
/*Receive data from server for autocomplete*/
$("#inputfield1").autocomplete("<url1>");
$("#inputfield1").result(function(event, data, formatted){
// Attach autocomplete if inputfield1 field is not empty
if(data){
var url = "<url2>?q="+data;
$.get(url,function(data1){
result=data1.split("\n");
$("#inputfield2").autocomplete(result);
});
}
});

Make sure you're using the latest version of the Autocomplete plugin. There was a bug in versions prior to 1.1 where if you enabled autocomplete on a field after that field had focus (as would happen in your example if you tabbed from the first input field directly into the second) it wouldn't work properly until focus was lost and then restored again...
Here's a quick demo that shows this construct working with the latest Autocomplete version.

You say you need to select #inputfield2 twice so the autocomplete event binds to it, right?
I'm just thinking.. can it be possible that you are using your tab key on your keyboard to select #inputfield2 and when that doesn't work you select #inputfield2 with your mouse? If so, isn't it possible that the #inputfield1 blur event doesn't kick in until you "unselect" it with your mouse (maybe some kind of bug)?
I haven't tried this, it's just a thought.