show images for autocompleted

[Jussiadev]

My autocomplete works well, but I need that when you enter something and choose it, not only text appears, but also a picture like this

<div class="input-field col s6">
  <input type="text" id="autocompleteGood" class="autocomplete">
  <label for="autocompleteGood">Товар</label>
</div>
$(document).ready(function() {
  $('#autocompleteGood').autocomplete({
    data: {
      'Apple': null,
      'Microsoft': null,
      'Google': 'http://via.placeholder.com/350/FF0000'
    },
 });

[acburst]

Is the image support autocomplete currently have not what you are looking for?

[Jussiadev]

@acburst I have not found. Now, even if there is a small image at the time of input, then when the line is selected, it disappears and only text remains. In the documentation when you enter the word "google", then a gray image appears first, but when you select this word, there is no image.
And I need to have both images and text

[DanielRuf]

Unfortunately onAutocomplete only returns the text. I might create a PR to also provide the image. Otherwise you would have to get the image from the list based on the return value of the onAutocomplete callback.

[Jussiadev]

@DanielRuf I would be grateful if you could help me with this. In the onAutocomplete I can not get a link to the image from 'Google': 'http://via.placeholder.com/350/FF0000'

[DanielRuf]

Because just the first value is available as parameter. I'll create the PR in a few minutes.

[Jussiadev]

@DanielRuf thank you:)

[DanielRuf]

Demo for v1: https://codepen.io/anon/pen/jYXyZX

I guess you use v1? Or is a version for v0 (0.100.x) also needed?

[DanielRuf]

See #5578

[DanielRuf]

I also have a precompiled version if you need this. You can fork my branch and compile the js with grunt js_compile and create the dist files with grunt release.

[Jussiadev]

@DanielRuf, I think that i have v1

{
  "name": "adminka-che",
  "version": "1.0.0",
  "private": true,
  "config": {
    "nuxt": {
      "port": "4444"
    }
  },
  "description": "jussiadev@gmail.com",
  "main": "index.js",
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "test": "gulp test"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "hammerjs": "^2.0.8",
    "jquery": "^3.0.0 || ^2.1.4",
    "nuxt": "^1.0.0",
    "vue-datepicker-local": "^1.0.9"
  },
  "engine": "node >= 6",
  "devDependencies": {
    "autoprefixer": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "grunt": "^1.0.1",
    "grunt-banner": "^0.6.0",
    "grunt-browser-sync": "^2.2.0",
    "grunt-concurrent": "^2.3.1",
    "grunt-contrib-clean": "^1.1.0",
    "grunt-contrib-compress": "^1.4.1",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-copy": "^1.0.0",
    "grunt-contrib-uglify": "^3.0.1",
    "grunt-contrib-watch": "^1.0.0",
    "grunt-notify": "^0.4.5",
    "grunt-postcss": "^0.8.0",
    "grunt-remove-logging": "^0.2.0",
    "grunt-rename-util": "^1.0.0",
    "grunt-sass": "^2.0.0",
    "grunt-text-replace": "^0.4.0",
    "grunt-prettify": "^0.4.0",
    "node-archiver": "^0.3.0",
    "node-sass": "^4.5.2",
    "phantomjs-prebuilt": "^2.1.14"
  }
}

But I tried the project and got Google undefined

[DanielRuf]

I do not see any materialize dependency.
So far, how did you checkout my branch?

Did you try

git clone git@github.com:DanielRuf/materialize.git
git checkout patch-autocomplete-icon-parameter
npm install
grunt release

and use the JS files from the dist or bin directory?

[DanielRuf]

You can also try https://gist.githubusercontent.com/DanielRuf/2a6a729b38001be29338906ae6f203ce/raw/95de1aededb4fdb86e72166a16ef80aafadd233d/materialize.js