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

html catch event when user is typing into a text input

Im just wondering how I go about catching the event when the user is typing into a text input field on my web application.
Scenario is, I have a contacts listing grid. At the top of the form the user can type the name of the contact they are trying to find. Once there is more than 1 character in the text input I want to start searching for contacts in the system which contain those characters entered by the user. As they keep typing the data changes.
All it is really is a simple type ahead type functionality (or autocomplete) but I want to fire off data in a different control.
I can get the text out of the input once the input has lost focus fine, but this doesnt fit the situation.
Any ideas?
Thanks

Use the keyup event to capture the value as the user types, and do whatever it is you do to search for that value :
$('input').on('keyup', function() {
if (this.value.length > 1) {
// do search for this.value here
}
});
Another option would be the input event, that catches any input, from keys, pasting etc.

Why not use the HTML oninput event?
<input type="text" oninput="searchContacts()">

I would use the 'input' and 'propertychange' events. They fire on cut and paste via the mouse as well.
Also, consider debouncing your event handler so that fast typists are not penalized by many DOM refreshes.

see my try:
you should put .combo after every .input classes.
.input is a textbox and .combo is a div
$(".input").keyup(function(){
var val = this.value;
if (val.length > 1) {
//you search method...
}
if (data) $(this).next(".combo").html(data).fadeIn(); else $(this).next(".combo").hide().html("");
});
$(".input").blur(function(){
$(this).next(".combo").hide();
});

Using data attributes to filter a select box (using third party JS filtering code)

I am using this relatively simple JS program:
http://www.barelyfitz.com/webdesign/articles/filterlist/
The program just filters a select box using a text box.
However, I want to jquery and HTML5 data attribute which is different how it was originally used. I give my text box filterer a data attribute:
<input id="filter_text" name="filter_text" data-filterable="myselect"
type="text" />
I use the following jquery to get the name of the select box that is to be filtered and then filter the select box:
$(function() {
$('input[data-filterable]').keyup(function() {
select_box_name = $($(this).data('filterable'))[0];
filter = new filterlist(select_box_name);
filter.set(this.value);
});
});
which NEARLY works. You can filter but if you press backspace to de-filter then nothing happens i.e. it doesn't 'unfilter'.
It must be something really small!!
Thank you :).

You need to initialize the filter outside the event handler:
$(function() {
$("input['data-filterable']").each(function() {
var filter = new filterlist($($(this).data('filterable'))[0]);
$(this).keyup(function() {
filter.set(this.value);
);
});
});

On every keyup you're reinitializing filter. So you can only filter on the select as it is right when you press a key. Move the initialization of the filter out of the keyup event and it's working.
Here's a fiddle.

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.

Jquery Autocomplete: How to fill out input on page load

I set up a jquery autocomplete that queries an endpoint to get the choices in the input (once you start typing):
$("#brand-select").autocomplete({
source: function(request, response) {
$.getJSON(
'/networks?search='+request.term ,
function(data) {
data = JSON.parse(data);
response(data);
}
);
},
minLength: 1,
multiselect: true
});
Is there a way I can fill out the autocomplete so that there is text in the input right away (on page load)?
For example, after the autocomplete is set up, I want the input to automatically display 'ABC'
I know this isn't right but I've tried:
$("#brand-select").autocomplete(["ABC"]);

Presumably brand-select is an input box? Therefore you can inject the value directly (if you're using script to build your HTML) so you end up with something like <input type="text" id="brand-select" value="ABC"/>.
Or you can just use standard jQuery to populate it, e.g. $("#brand-select").val("ABC");.
The autocomplete relates to the dropdown and searching, but the input box underneath is unchanged, so you can treat it like any other input.
P.S. If you then want it to automatically perform a search based on that text, then call the autocomplete's "search()" method (see https://api.jqueryui.com/autocomplete/#method-search), e.g. $("#brand-select").autocomplete("search");