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 UI, autocomplete, trying to submit selected answer in form

When the user selects an autocomplete item from an input element, I can't seem to get the form to submit the selected value. Instead, it submits the partially typed text. I'm using the select: feature of autocomplete to no avail. #scustnm is my input element and #a_comp is the form surrounding it. Thanks!
if(vsvcus != "")
{
$( "#scustnm" ).autocomplete(
{
source: "S205ai.pgm?task=autoacustfil&WCODE=" + vscmpy + "&vcustnm=" + vsvcus,
minLength: 1,
select: function() {$("#a_comp").submit();}
});
}

I would suggest using a $.post() request instead of a form submit. So instead of having:
select: function(){$("a_comp").submit();} you would write something like:
select: function() { $.post("urlToPostDataTo"), {dataID1: $("#dataID1"), dataID2: $("#dataID2")}, function(data, callback){ //do stuff with the output of the page}}
I believe when you submit the form, the form most likely uses just the input text field instead of the autocomplete suggestion. By using a $.post() request you have total control of exactly what data is posted when the user clicks on the select option of autocomplete. Hope this helps.

You would need to assign the value back to the input that has the autocomplete on it in order for the form to read it in.
Inside of your select function, you would need something like this:
$( "#scustnm" ).val( /*Return Value Here*/ );
The form doesn't know what you've selected, it's selecting the value from the input box which never gets updated by your AJAX call. Because it only knows what you've typed in the box, that is the value that gets submitted with the form.

jquery autocomplete that validates entered value

I am using jquery and looking for a autocomplete that will support the mustMatch option (where the user must enter an exists item name) -> this is not a problem since there are several autocompletes that do so.
The problem is that I need the autocomplete will test the entered value.
For example:
The user enters "England".
A list opened with "England".
The user doesn't hit the list item (don't select England), but just click outside the input.
Most autocompltes that support mustMatch will clear the input because the user doesn't select from the list. I am looking for an autocomplete that will validate whether "England "exists or not and act accordingly.
Do you know such autocomplete plugin? Or maybe do you know how can I modify an exists plugin to do so?

jQueryUI's autocomplete can do this along with Scott González' autoSelect plugin, combined with the change event on the widget. If you include the plugin, all you should need is:
$("#auto").autocomplete({
source: ['England', 'Germany', 'Denmark', 'Sweden', 'France', 'Greece', 'Italy'],
change: function (event, ui) {
if (!ui.item) {
this.value = '';
}
}
});
Example: http://jsfiddle.net/qb59C/

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.