3

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?

Ram
  • 3,092
  • 10
  • 40
  • 56
Chidi Okeh
  • 1,537
  • 8
  • 28
  • 50
  • 1
    Why don't you use simply `placeholder`? Will run in IE 11 but not IE 9 http://caniuse.com/placeholder – Reeno Dec 17 '13 at 16:59
  • @Reeno, thanks for that tip. Still an issue though, even if I make the recommended change. Most of our employees at work have IE9 as part of the organization's standard business practice. Besides, we can't control what OS vendors and other users have. It is easier to tell users that IE8 is no longer supported. IE9 still is. – Chidi Okeh Dec 17 '13 at 17:14
  • As placeholder won't work in IE 9, you can try summer JavaScript to emulate it, see e.g. http://stackoverflow.com/questions/6366021/placeholder-in-ie9 – Reeno Dec 17 '13 at 18:01
  • Or http://stackoverflow.com/questions/11303739/ie9-html5-placeholder-how-are-people-achieving-this – Reeno Dec 17 '13 at 18:03
  • @Reeno, it took me almost all day to get back to you on this. What exactly should I be looking at? I was hoping to see that something that adds to an existing plugin. I am definitely missing something here. By the way, placeholder doesn't work for IE11, atleast not on mine. – Chidi Okeh Dec 18 '13 at 02:00
  • 1
    Where is `data-placeholder` coming from? It's not standard (X)HTML and jQuery's autocomplete doesn't use it, at least according to http://api.jqueryui.com/autocomplete/ Is it another plugin? In the two links I posted there are some links how to get `placeholder` working in IE9. Try e.g. http://corymathews.com/html5-placeholder-in-ie/ – Reeno Dec 18 '13 at 08:37
  • @Reeno, thanks for your continued assistance. I changed it to placeholder and it still doesn't work for IE11. However, after adding back the meta tag for IE11, then I can see the `Choose an agent...` display for ie11 but not for 9. I guess my question is how do I use the scripts on these links you are posting? How do they integrate with current jquery autocomplete plugin? I tried this latest link, saved the file as placeholder.js as instructed but where do I put the fn.placeholder();? It said put in your page but where in the page? – Chidi Okeh Dec 18 '13 at 14:03
  • Ok, FINALLY! It is working!!! I got the working script from here. http://jamesallardice.github.io/Placeholders.js/ All I needed was copy the placeholder.mins.js file into my js folder and everything is working as expected even to IE8 version. Thanks Reeno for leading me to the solution. – Chidi Okeh Dec 18 '13 at 17:40
  • I added it as an answer. If other people end up here they can find it easily. – Reeno Dec 19 '13 at 08:39

1 Answers1

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.

Community
  • 1
  • 1
Reeno
  • 5,720
  • 11
  • 37
  • 50