Call function within autocomplete jQuery plugin

Question

I'm working with the autocomplete jQuery plugin, but I have faced two main problems.

Calling a function within the autocomplete function
Getting the value of textbox to pass with function

Html

<input id="txtDemo" type="text" />

Js

$("#txtDemo").autocomplete({
   source: availableTags
});

This is my function, Value is value of textbox

function Demo (value)
{
//code for getting value from code behind in the form of array
}

my main objective is fetch data in autocomplete plugin from database but i don't know how we call another function after call autocomplete function source — S. S. Rawat, Aug 29 '13 at 12:32
@ArunPJohny I think Op don't want to handle it externally instead searching for a built in autocomplete. — Praveen, Aug 29 '13 at 12:36

Praveen · Accepted Answer · 2013-08-29T12:45:25.923

3

You can add an event handler like this

$('#txtDemo').on('change', function(){
 var value = $(this).val();
 Demo (value); //pass the value as paramter
});

//Handle it here
function Demo (value) {
 //code for getting value from code behind in the form of array
}

From your comments: Possible using select

select( event, ui )Type: autocompleteselect

Triggered when an item is selected from the menu. The default action is to replace the text field's value with the value of the selected item.

$("#txtDemo").autocomplete({   
   source: availableTags,
   select: function( event, ui ) {
            demo(ui.item.value);          
      }

});

Here is sample working fiddle

Hope you can understand.

edited Aug 29 '13 at 12:45

answered Aug 29 '13 at 12:26

Praveen

55,303
33
133
164

sorry but i want to call function within autocomplete function – S. S. Rawat Aug 29 '13 at 12:28
A callback object, for more information check out http://api.jqueryui.com/autocomplete/#event-select – Praveen Aug 29 '13 at 12:38
your fiddle is very nice.. you are very close to my answer. i want call function in source – S. S. Rawat Aug 29 '13 at 12:47
May I know the reason? Also I think it is not possible. – Praveen Aug 29 '13 at 12:53
because i want set source data which is fetch from code behind.. – S. S. Rawat Aug 29 '13 at 12:54
thank you help me to much. i done it.. – S. S. Rawat Aug 29 '13 at 12:57
can you also suggest me how me apply height on it and scroll bar appear when item is to much to it – S. S. Rawat Aug 29 '13 at 12:59
@Subhash you're getting scroll? maybe css conflict could have occured. Anyway take a look at this http://stackoverflow.com/questions/9282320/jquery-ui-autocomplete-1-8-scroll. will help you. – Praveen Aug 29 '13 at 13:06
add five more item to your list and apply them fix height upto five item show at a time and then scroll bar apply – S. S. Rawat Aug 29 '13 at 13:08
@Subhash Oh you need a scroll. I misunderstood as you want to remove the scroll. here I have a new fiddle with fixed height http://jsfiddle.net/EBduF/475/ – Praveen Aug 29 '13 at 13:18
1

`.ui-autocomplete { max-height: 100px;overflow-y: scroll; }` is the hack. – Praveen Aug 29 '13 at 13:19

Call function within autocomplete jQuery plugin

1 Answers1

Linked