CiviCRM Community Forums (archive)

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:
{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}

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

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?

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:

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

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


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):
<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???
<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 :-)

I did actually try that, but then got an error:
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?

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:
<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>


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 :-)