Uploaded image for project: 'PUBLIC - Liferay Alloy UI'
  1. PUBLIC - Liferay Alloy UI
  2. AUI-87

AUI.autocomplete only seems to work in Firefox when using a function datasource (which uses synchronous ajax call to get a json-response)

    Details

    • Type: Technical Support
    • Status: Closed
    • Priority: Major
    • Resolution: No Longer Reproducible
    • Affects Version/s: None
    • Fix Version/s: None
    • Component/s: JavaScript
    • Labels:
      None

      Description

      AUI.autocomplete only seems to work in Firefox when using a function datasource which uses synchronous (sync: true) ajax call to get a json-response.
      In all tested browsers that fail to show the result (Chrome, Opera, Internet Explorer 8), I can see that the ajax call is made (through logs).

      For Internet Explorer 8, I can get the result to display by pressing the "trigger"-button if, and only if, I leave the input field empty. (It then fetches EVERYTHING since I send an empty search-string).

      [edit] Here's my javascript :

      window.AC = new A.AutoComplete(
      {
      dataSource: function(request) {
      var items = null;
      resUrl.setResourceId("depositSearch");
      resUrl.setParameter('search',A.one('#<portlet:namespace/>_searchField').get('value'));
      A.io.request(resUrl.toString(), {
      cache: true,
      sync: true,
      timeout: 1000,
      dataType: 'json',
      method: 'get',
      on: {
      success: function()

      { items = this.get('responseData'); }

      ,
      failure: function() {
      }
      }
      });

      return items;
      },
      dataSourceType: 'Function',
      schema: {
      metaFields:

      {javaClass:"javaClass"}

      ,
      resultListLocator: "list",
      resultFields: ['id', 'name']
      },
      schemaType: 'json',
      forceSelection: true,
      autoHighlight: false,
      matchKey: 'id',
      queryDelay: 0.5,
      typeAhead: true,
      contentBox: '#myContainer',
      input: '#<portlet:namespace/>_searchField'
      }
      );

      AC.resultTypeList = false;
      AC.formatResult = function(oResultData, sQuery, sResultMatch)

      { return ('<span style="color:#191970;">' + sResultMatch + "</span>, " + oResultData.name); }

      ;

      AC.render();

        Attachments

          Activity

            People

            • Votes:
              0 Vote for this issue
              Watchers:
              0 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:
                Days since last comment:
                7 years, 17 weeks, 3 days ago