Is there browser compatibility issue with jquery autocomplete plugin?

Question

I am using the jquery autocomplete plugin for one of our web apps.

On the combobox, we use this as default value or option.

  var input = this.input = $( "<input>" )
  var input = this.input = $( "<input>" )
  **.attr('data-placeholder', 'Choose an agent...') <-- this line for default value.**
  .insertAfter( select )
  .val( value )

One of my PCs has IE9, Firefox, Google Chrome.

Another PC has IE11, Firefox, Google Chrome.

When we run the app, we can see the default option of Choose an agent... on both FF and Google Chrome but this default value is blank or missing on combobox when run against IE.

I have added this meta tag at top of the page:

  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" /> (for IE9)

and

  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE11" /> (for IE11).

Yet, the problem persists.

Does anyone know if there is a fix for this?

Answer 1

data-placeholder is not standard (X)HTML (like everything with data- in front) and according to http://api.jqueryui.com/autocomplete/ it's also not part of jQuery's autocomplete. You should use just placeholder which is supported in most current browsers.
For older browsers (e.g. IE 9) you can use some JavaScript like linked in Placeholder in IE9 or IE9 HTML5 placeholder - how are people achieving this? to achieve the desired effect.