current community

more stack exchange communities

Stack Exchange
tour help
Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.
up vote 0 down vote favorite

I developed an application page for SharePoint, and installed it and the page shows up just fine. The user will have the ability to type in some information, just like a form; this includes selecting his or her name and their manager's name (this data is coming from a database and getting populated into a JSON list on Page_Load). The problem is with jQuery's select event for autocomplete, the list of names shows up just fine but when the user uses the mouse to select the name or hits ENTER on the keyboard, nothing happens for that textbox (I have coded that when the user selects the name, another textbox is populated with the manager name as well and this work just fine). I tested this in all major browsers, and it works perfectly except (of course) in Internet Explorer (v 8 and 9). The JSON being generated for this looks something like this:

[{"name":"Full Name","id":"1","boss":"Boss's Name"}....];

I was wondering if anyone has come across something like this before. And just to visualize things easier, here is the base code for this page:

//the jQuery was provided in part from http://jsbin.com/avoyu5/1/edit so thanks to
//all who provided such examples to make my life easier!!
<link rel="stylesheet" href="/_layouts/MyProject/css/jquery-ui.css" />
<script src="/_layouts/MyProject/js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="/_layouts/MyProject/js/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
  $function() {
    var jsonObj = <%=jsonObject %>;  // jsonObject is being filled server-side
    $("#<%=txtNames.ClientID %>").autocomplete({
      source : function(request, response) {
        var matches = $.map(jsonObj, function(val) {
          if (val.name.toUpperCase().indexOf(request.term.toUpperCase()) === 0) {
            return { name: val.name, id : val.id, boss: val.boss };
          }
        });
        response(matches);
      },
      select : function (event, ui) {
        $("#<%=txtBoss.ClientID %>").val(ui.item.boss);
      }
    });
  });
</script>
share|improve this question
add comment

closed as off-topic by Robert Lindgren♦, RJ Cuthbertson, Vardhaman Deshpande, Daniel Ziga, John Chapman Oct 29 '13 at 21:07

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Programming questions not specific to SharePoint are off-topic here, but can be asked on Stack Overflow." – Robert Lindgren, RJ Cuthbertson, Vardhaman Deshpande, Daniel Ziga, John Chapman
If this question can be reworded to fit the rules in the help center, please edit the question.

1 Answer

up vote 1 down vote accepted

If found out that Internet Explorer handles autocomplete focus event differently that other browsers; essentially IE performs the event asynchronously, and because of this I was unable to quickly determine the event order from which the events were firing. Basically, all I had to do was add this little bit of code to the select event:

select: function(event, ui) {
  $this = $(this);
  setTimeout(function() {
    $("#<%=txtBoss.ClientID %>").val(ui.item.boss);
    $this.blur();
  }, 1);
}

I found a great article that explains this very nicely here: http://daniellang.net/blur-not-working-with-jquery-ui-autocomplete-in-ie/

share|improve this answer
 
Additional to this, I was noticing the script was not working in Firefox or Chrome. The reason is because in my SharePoint masterpage file, my menu navigation is using jquery and jquery UI, so I needed to place the scripts (jquery and jquery UI) before the scripts used for the menu. To do this, I added the script to the <asp:Content ID="PageTitleInTitleArea"> section and added the following to Page_Load server-side: ClientScript cs = this.Page.ClientScript; if (!cs.IsClientScriptBlockRegistered("jquery-1.8.3.js")) cs.RegisterStartupScript(this.GetType(), "jquery-1.8.3.js" Layouts URL); –  user2063134 Oct 29 '13 at 16:56
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.