Autocomplete trouble

[Erik Hommel]

I am struggling with an autocomplete using CRM.api3 (which works like a charm). Everything seems hunkydory when I use the .done for the CRM.api3 call, but not when I try to parse it into the autocomplete widget 
Can you spot the (must be blatantly obvious) mistake?

My code is:

Code: [Select]

{literal}
  <script type="text/javascript">
    cj(function($) {
      var testErik = CRM.api3('Contact', 'Get', {
        return:"sort_name",
        is_deleted:0,
        is_deceased:0,
        json:1});

      $('#ehtestje').autocomplete(testErik, {
        width:200,
        dataType:"json",
        parse: function(data){
          var parsed = new Array();
          $.each(data.values, function(id){
            parsed.push({data:data.values[id].contact_id, value:data.values[id].sort_name, result:data.values[id].sort_name });
          });
          return parsed;
        },
        selectFirst:false,
        matchContains:true,
        minChars:2
      });
    });
  </script>
{/literal}

[Coleman Watts]

Which version of Civi are you using? In 4.4 and below $.autocomplete was bound to a legacy plugin which has since been removed. In 4.5 and above $.autocompete is bound to jQuery UI's autocomplete widget. But in 4.5 we tend to use crmEntityRef a lot more than we use autocompletes because they're more robust.

[Erik Hommel]

In this project we are using 4.4 
And migrating is not an option (yet) so I am going to have to struggle with the autocomplete

[Coleman Watts]

I can't remember exactly what the signature of the legacy autocomplete plugin was... BUT you could improve forward-compatibility with your code by not using it.
4.4 does have the jQuery UI autocomplete widget built-in, it's just a little hard to get at because the other plugin is hogging its namespace. But you can access it using a trick like this.

[Erik Hommel]

Thanks Coleman, but I will need a little more explaining......I understand the principle that I can override the function, but I have no clue what I would do next from your example? Altough I can happily PHP my way around in CiviCRM, I am a total newbie in jQuery. So what happens in the trick and do you know of a good spot where the autocomplete widget is explained, or should I just Google?

[Erik Hommel]

Is this the autocomplete widget you are referring to?
http://jqueryui.com/autocomplete/

[Coleman Watts]

Yes, that's the one. Unlike the legacy autocomplete plugin, the jQuery UI one has documentation!

Here is what I was referring to - since both autocomplete widgets are trying to occupy the $.autocomplete namespace, you need to access the new one differently - basically make up a new name for it, like so:

Code: [Select]

cj.widget("civicrm.newAutocomplete", cj.ui.autocomplete, {});

cj(function($) {
  $('#ehtestje').autocomplete(...);
});


[Erik Hommel]

Thanks, I will have a go with that! 

[Erik Hommel]

Coleman,
still experiencing trouble, can you have one more look?

I was expecting this to work (and I have tested with a simple array although I want to use API results in the end):

Code: [Select]

<script type="text/javascript">
  {literal}
    cj.widget("civicrm.newAutocomplete", cj.ui.autocomplete, {});
    cj(function($) {
      var testData = ["Erik Hommel","Jaap Jansma","Betty Dolfing"];
      $('#ehtestje').autocomplete({source:testData});
    });
  {/literal}
</script>

but it does nothing. If I do this however, I get an autocomplete working. So to me it looks like I am still accessing the old widget???

Code: [Select]

<script type="text/javascript">
  {literal}
    cj.widget("civicrm.newAutocomplete", cj.ui.autocomplete, {});
    cj(function($) {
      var testData = ["Erik Hommel","Jaap Jansma","Betty Dolfing"];
      $('#ehtestje').autocomplete(testData);
    });
  {/literal}
</script>which will then cause me all sorts of parsing hassle. I can get around this by creating a function that puts the api result into text, but I want to be stubborn and investigate the way it is supposed to work neatly :-)

[Coleman Watts]

You almost got it, you just need to use the name of your newAutocomplete
So your code should be

Code: [Select]

<script type="text/javascript">
  {literal}
    cj.widget("civicrm.newAutocomplete", cj.ui.autocomplete, {});
    cj(function($) {
      var testData = ["Erik Hommel","Jaap Jansma","Betty Dolfing"];
      $('#ehtestje').newAutocomplete({source:testData});
    });
  {/literal}
</script>


[Erik Hommel]

I did actually try that, but then got an error:

Code: [Select]

TypeError: this.menu is undefined


...element.zIndex()+1).hide().data("menu"),this._on(this.menu.element,{mousedown:fu...

so I assumed I was using the wrong name. So I was on the right path but still have an error, but now probably in the widget? So should I drop back to the previous widget and do some function to parse the results of the CRM.api3 to the autocomplete?

[Coleman Watts]

Yikes, I just tried it myself and that code works in 4.5 but not in 4.4... there must be something about that widget that breaks when it is renamed. Sorry for leading you astray...

I guess your 2 choices are:
- Upgrade to 4.5 and get all the great features of entityRef widgets.
- Use the old autocomplete. I suppose it doesn't really matter which one you use because either way you are not using entityRef so either way you are writing legacy code.

[Erik Hommel]

I love to be led astray 

Seriously, I understand a lot more about the issue now so I am happy :-) Solved it roughly like this:

Code: [Select]

<script type="text/javascript">
  {literal}
    cj(function($) {
      var tekstArray = [];
      CRM.api('Contact', 'get', {
        contact_type: "Individual",
        return: "sort_name",
        is_deleted: 0}, {
        success: function(data) {
          $.each(data.values, function(key) {
            tekstArray.push(data.values[key].contact_id,data.values[key].sort_name);
          });
          console.log(tekstArray);
          $('#ehtestje').autocomplete(tekstArray, {minChars:1});
        }
      });
    });
  {/literal}
</script>


[Coleman Watts]

Hmm, that looks like sort of the opposite of an ajax autocomplete - it loads the entire(?) database into the client's memory on page load and then serves choices from that.
I guess that would work with a small database...

[Erik Hommel]

Agree! The example was meant as a basic structure, not the end solution!!!! This will now be worked with this structure, will update the post with the actual end solution once it is done :-)