locked
Multiple items with same name in Autocomplete field problem RRS feed

  • Question

  • Hi

    I have an ordering system (desktop app) which contains a list of customer details, stock and order details.

    On the create new order screen I have an autocomplete filed that runs a query to select all available stock items.  There can be many stock items in the list with the same name and although they all show up fine in the autocomplete drop down the problem comes when selecting one as it always seems to pick the first item in the list with that name.  Say there are 3 items in the list all with the name of "Printer" but each has a different price. If I picked the 3rd item, it jumps back to the first. I have read that this is the case when using autocomplete as it searches and uses the first value it finds. 

    I thought maybe I could put the stock row id in front of the stock item names so that each row is unique, but realise you can't get the row id until you have saved the record which means you would need to save twice when entering a new stock item.

    Does anybody have any suggestions on how best to tackle this problem?

    Many thanks

    Monday, December 23, 2013 2:22 PM

All replies

  • Iterate the dom ->

    $(".person_input").each(function(){ //grab each element with the class = person_input

    For each element found, run autocomplete()

      $(this).autocomplete();

    Modify autocomplete within the scope of this function to have it apply to all forms.

    $(".person_input").each(function(){
      $(this).autocomplete({
        source: function(request, response) {
          $.ajax({
            url: "/ajax/get_person/",
            data: {'q':request.term},
            dataType: "json",
            type: "POST",
            success: function(data){
              response(data);
            }//unnecessary trailing comma removed here
          });
        },
        focus: function( event, ui ) {
         $(this).val(ui.item.name);
          return false;
        },
        select: function( event, ui ) {
          $(this).val(ui.item.name);
          return false;
        }
      }).data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<a>" + item.name + "</a>" )
        .appendTo( ul );
      };
    });
    Friday, December 27, 2013 8:49 AM
  • Thanks for your reply Northwind,  where will I need to put this code? Also, I am using VB, will it be hugely different?
    Friday, January 3, 2014 10:45 AM