JQuery Autocomplete's compatibility with IE7

Question

So I have this piece of code where all it does is autocomplete what the user is typing by giving suggestions based on a list of available choices.

In order to do that I'm currently using jQuery with jquery ui's autocomplete. However, it works on chrome, firefox, IE11 but not IE7. I figure that IE7 is pretty old and that it should be considered obsolete, but the end-client the software is using IE7, so yes pity for me.

Anyways here is the jQuery script:

var data = [
  {
    label: "Apple",
    value: 1
  },
  {
    label: "Microsoft",
    value: 2
  },
  {
    label: "Amazon",
    value: 3
  }
];

$("#companyName").autocomplete({
  source: data, 
  delay: 0, 
  autofocus: true,
  minLength: 1,
  focus: function( event, ui ) {
      $("#companyName").val( ui.item.label );
      return false;
  },
  select: function( event, ui ) {
      $("#companyName").val(ui.item.label);
      $(".companyID").val(ui.item.value);
      $("#companyIDText").text(ui.item.value);
      return false;
  }
});

And here is the JSFiddle , just to quickly check that it actually works.

The problem is that I can't really figure out the part that IE7 cannot support. Can anyone help me out?

SN: I'm also stuck in using HTML 4 if that could give a hint on why it's not working

EDIT: So what I'm seeing on IE7 is literally nothing: I type in and nothing pops up, while it should start giving the suggestions even simply clicking on the input textbox. The console is not showing any kind of error anyways. Something I really feel the need to point out is that, loading the page with the Developer Tools opened (the IE's ones of course) actually make it work. And the compatibility shown on the toolbar of the Developer Tools is still 7. So I'm even more lost than before right now

The array of objects is correctly build, printing it on the console shows correctly the built array and how I would expect it to be. So I stripped it down to only an array of Strings (and not objects) and took off the 'focus' and 'select' options of the autocomplete widget, however still nada, nothing pops up either way.

This is everything I imported in order to make it work (everywhere but IE7):

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></script>

Answer 1

So I suspect there is an issue with the various versions. I see you're using a Style Sheet from jQuery UI 1.12.1 and this may or may not work with jQuery UI 1.8.

I would advise the following:

  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Example: https://api.jqueryui.com/1.11/autocomplete/#entry-examples

Test: https://jsfiddle.net/Twisty/gdeqm2c8/2/

The rest of your code appears to be correct. I suspect that the UI or the CSS is calling something that is not available.

From the jQuery UI 1.11 Release notes :

Discontinued IE7 Support

As of this release we are no longer accepting bug reports for IE7 issues. We have also removed IE7 from our testing infrastructure. The IE7 workarounds are still present in the code, but we will remove them for jQuery UI 1.12.