Autocomplete Multidata

[ygorma]

Autocomplete is restricted to the raw value of an input, which makes it difficult to parse id's and other information to the backend. There are many inelegant solutions out there, but materialize should support this natively.

For better understanding, autocomplete should work like a select, where you can pass a database reference (over the value="" attribute) and a human readable data (between the tag).

Expected Behavior

Autocomplete should be able to pass multidata. Arrays, Objects, JSONs, etc.

$('input.autocomplete').autocomplete2({
    data: [
      {id:1,text:'Apple',img:'http://placehold.it/250x250'},
      {id:2,text:'Microsoft',img:'http://placehold.it/250x250'},
      {id:3,text:'Google',img:'http://placehold.it/250x250'},
    ]
  });

Current Behavior

Autocomplete can only pass the raw value of an input and set a icon on the right side.

$(document).ready(function(){
    $('input.autocomplete').autocomplete({
      data: {
        "Apple": null,
        "Microsoft": null,
        "Google": 'https://placehold.it/250x250'
      },
	});
});

Possible Solution

A complete solution is done and provided by phoebebright here:
https://gist.github.com/phoebebright/b309b990af3a29be9c30793eab91b79d

[Smankusors]

hmm this is kinda difficult which code that they added/changed... wait wait, what's the use case of throwing an id there?

[ChildishGiant]

I recall there being another similar issue but I can't find it. The use case is so that things can be sorted in a different order to their title. My PR for #115 would provide a workaround but is rather inelegant if you just want to change the order of a few items permanently.

[wuda-io]

The id is for identifing data bits, which came from a Database. It should work the same way for images. Later for example a description could also easily added because the datastructure is better organized.
I dont understand what sorting has to do with it. This is another topic I guess.
Best regards

Related #67

[ygorma]

hmm this is kinda difficult which code that they added/changed... wait wait, what's the use case of throwing an id there?

Have a look on line 5674 in https://codepen.io/arg3ni5/pen/VPQZwe

$.fn.autocomplete2 = function (options) { ...

For better understanding, autocomplete should work like a select, where you can pass a database reference (over the value="" attribute) and a human readable data (between the <option></option> tag).

Passing only human readable data to a database may result in imprecise storage of references.

Using PHP, this is my workaround. I had to show the database value to the user in autocomplete, so it can be managed in post processing:

// <input name="autocomplete" type="search" class="autocomplete" autocomplete="off">
// Autocomplete value: Username (id)
// Eg. ygorma (123456)

function get_string_between ($str,$from,$to) {
    $string = substr($str, strpos($str, $from) + strlen($from));
    if (strstr ($string,$to,TRUE) != FALSE) {
        $string = strstr ($string,$to,TRUE);
    }
    return $string;
}

$user_id = get_string_between($_POST['autocomplete'], "(", ")");