JQUERY Autocomplete (disable click selection) - javascript

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

Related

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

How to remove filter criteria and display data on focus of a Text Input field when using Jquery Autocomplete feature

This is a program which is responsible to display autosuggestions .
When i keep the focus inside the tags input field , it should display all the available data present inside the source , (i don't need any filter criteria )
On focus of the text input field it should display all the data
This is my jsfiddle
http://jsfiddle.net/n30bku6v/1/
$(document).on('focus', '#tags', function() {
$( "#tags" ).autocomplete({
source: availableTags
});
});
Could you please tell me how to do this
I think first of all you should bring your autocomplete initialization out of onFocus callback, so it won't initialize on each focus event.
To achieve your desired behavior, you could use minLength property and search method, like this:
$(function(){
$("#tags").autocomplete({
source: availableTags,
minLength: 0
});
$(document).on('focus', '#tags', function() {
$("#tags").autocomplete("search","");
});
});
Using minLength we say to autocomplete to work even when there is no query, and search method is used to trigger autocomplete with empty query.
Working demo.

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 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

Simple javascript form reset when certain text boxes are clicked

Morning all...thicky, newbie Rich here!
I have a very simple set up, three different search options for finding product information i.e. a cascading drop down list, a product search text box and a radio button list.
Ideally, I do not want the form to get cluttered with information or have to use a 'click here to reset' button.
What I would like is for the form to reset/clear itself when a user either hits the drop down, the text box or the radio button list. Therefore this will ensure the searching does not get cluttered with information that potentially isn't being used.
How would one go about doing this? As per my other questions, please excuse my ignorance.
What you want to do is fairly simple with jquery if you're using it. Without knowing your exact markup I can really only pseudo-code it out for you, but something like this should be a start:
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$inputs = $("#places, #search, #radio_search");
$.each($inputs, function() {
$(this).focus(function() {
$.each($inputs, function() {
$(this).val('');
$(this).attr('checked', false);
})
});
})
});
</script>
You want to inlcude the jquery library and add this to the head tag of the html page you want to do this on. You'll also need to make sure the $inputs = $("#places, #search, #radio_search"); matches the specific ids of the inputs you're trying to change.
Ok dokey, got it to work, lovely stuff.
However, in my drop down list, I wish to retain the orignal value rather than clear it all together, the current working code is as follows.
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$inputs = $("#tbxProdAC, #ddlBuyer, #txtbxHowMany, radTopx");
$.each($inputs, function() {
$(this).focus(function() {
$.each($inputs, function() {
$(this).val('');
$(this).attr('checked', false);
})
});
})
});
Is there a way I can specify the individual values i.e. tbxProdAC ='',
ddlBuyer = Original Value, txtbxHowMany='', radTopx =''?

Categories