locked
CRM 2013 jQuery autocomplete field RRS feed

  • Question

  • Hi,

    Trying to get jQuery autocomplete plugin working on CRM 2013 custom entity field.

    Added WebResources to custom entity's form properties:
    •jquery.js
    •jquery_ui.js
    •autocomplete_customfield.js

    Added event handler to custom entity's onLoad event, invoking function InitAutoComplete (from autocomplete_customfield.js), passing parameter to it "contoso_title".

    Here is autocomplete_customfield.js code:

    function InitAutoComplete(TextBoxName)
    {
    (function($){
       $('head').append('<link rel="stylesheet" href="http://crm2013/WebResources/eb_jquery.ui.css" type="text/css" />');
       $(document).ready(function ()
        {
            $('#' + TextBoxName).bind('keydown', function (event)
            {
                if (event.keyCode === $.ui.keyCode.TAB &&
                    $(this).data('ui-autocomplete').menu.active)
                {
                    event.preventDefault();
                }
            }).autocomplete({
                minLength: 0,
                source: function (request, response)
                {
                    response($.ui.autocomplete.filter(['Apples', 'Oranges', 'Bananas', 'Grapes', 'Tomatoes', 'Mango'], request.term));
                },
                position:
                {
                    my: 'left top',
                    at: 'left bottom',
                    of: $('#' + TextBoxName)
                }
            }).css('z-index', 999999);
            $('.ui-autocomplete').css('max-height', '100px');
            $('.ui-autocomplete').css('max-width', '600px');
            $('.ui-autocomplete').css('overflow-x', 'hidden');
            $('.ui-autocomplete').css('overflow-y', 'auto');

            $('#' + TextBoxName).focus
            (
                function ()
                {
                    $(this).autocomplete('search', $(this).val());
                }
            );
        });
    })(window.crmjQuery);
    }

    Code is taken from http://nathanielmnelson.com/node/29. Other examples were also tried (standart jquery autocomplete code, etc).

    Also recommendations from http://www.develop1.net/public/post/jQueryNamespacing.aspx are taken into account.

    CRM text field does not react. It works as a standard text field with no jquery drop down suggestions. Only when you press "enter" on a field it gives you a full list of suggestions (but this list is not active as you type, and is never filtered by inserted characters). It seems that CRM 2013 standard form javascript/css (or DOM tree) has some problems with custom jquery autocomplete functionality.

    Any ideas?

    Friday, October 4, 2013 3:13 PM

All replies

  • There should be no problem with the CRM. Debugging the code should fix it... adding "debugger;" in some place at the code and using F12->script->start debugging on the browser... It's more or less a standard procedure for adding javascript. Let me know if you find anything of if you need more help on the process.
    Friday, October 4, 2013 6:08 PM
  • Hi,

    Although this technique used to work for CRM4/CRM2011 - because the edit fields are now dynamically shown when you click on field - it really isn't a good idea any more. Adding jQuery plugins to the CRM field controls interferes with their standard behaviour and also won't work on the tablet client.

    It has become even more important to stick to supported customisations with new functionality being rolled out on a much more frequent timescale.

    If you really do need an autocomplete, the only supported way would be to create a html webresource and insert that on the form - or use a lookup that has native inline search functionality.

    Not the answer you were looking for - I know!

    Scott


    Scott Durow
    Blog www.develop1.net    Follow Me
    Rockstar365
    If this post answers your question, please click "Mark As Answer" on the post and "Mark as Helpful"

    Friday, October 4, 2013 9:43 PM
    Answerer
  • Thanks for reply. I investigated the issue in a more detail. Scott, as you say, the edit fields are loaded dynamically. An "input" tag in html appears only after a field value is once edited on a form (id naming of input tag has also changed to "fieldname_i"). At first my thought was that this new look and dynamism of the fields is only css usage. However, it's the very page load process have been changed. And this is sad. JQuery plugins (or other awesome javascript libraries) usually are must components in a web. In this case CRM 2013 seems to get more closed, a kind of step back in terms of advanced customisation. 

    However, with some javascript modifications jquery autocomplete plugin works on field's onChange event (starting from the second change, of course - before the edit field did not exist on a form). It is possible to "invoke" a field onLoad and then use it as a normal field in onChange stage. But this is not the most elegant workaround.

    Monday, October 7, 2013 8:49 AM
  • Can share the modification that needs to be done on jQuery to make it work .
    Thursday, October 24, 2013 6:39 AM
  • Hi Janius,

    we have about the same Problems with our jQuery-autocomplete implementation which works perfect under CRM 2011 but not  under CRM 2013.

    Can you please share your workaround? This would save me a lot of time.

    Thanks Karl

    Tuesday, January 21, 2014 3:07 PM
  • Hi Jaunius,

    Could please show us the workaround, please ?

    Friday, January 31, 2014 3:31 PM
  • Hi Janius,

    Can you please share your changes which you made in jquery.

    Thanks

    Friday, April 18, 2014 7:02 AM
  • If you want to do it on form load, access the value of the control before attaching the autocomplete plugin.  This will make the input element ("fieldname_i") "visible".

    XRM.Page.getAttribute("fieldname").getValue();

    Follow the above line of code with your autocomplete code.

    

    

    Wednesday, August 6, 2014 6:41 PM
  • Anyone have any luck getting this to work in CRM2013?
    Friday, November 21, 2014 11:30 AM