CODEWITHSUNDEEP
javascriptjqueryhtml
suchislife
suchislife

Reputation: 1

Obtaining data key/value pair from Materialise CSS autocomplete. How?

I was able to change the code below to output what I click to console. As you can see, the sendItem function does that for me.

I am having a hard time accomplishing the following:

  1. User types AP
  2. autocomplete completes it to Apple
  3. User clicks on APPLE
  4. Its corresponding value is sent to console

Basically, materialize has a really awesome function they choose to display pictures with, when it can do a lot more. For example, a whole mySQL search based on:

  1. Load the auto complete data with current pending clients
  2. Each client is a key/value pair in a json array of clients (array of arrays)
  3. autocomplete searches the keys in the data array and upon user click,
  4. dispatches a ajax mysql search for its corresponding value which in this case is a unique client id.
  5. Finally, we render the results to user.

function sendItem(val) {
    console.log(val);
}

$(function () {
    $('input.autocomplete').autocomplete({
        data: {
            "Apple": null,
            "Microsoft": null,
            "Google": 'http://placehold.it/250x250'
        },
        onAutocomplete: function(txt) {
          sendItem(txt);
        },
        limit: 20, // The max amount of results that can be shown at once. Default: Infinity.
    });

});
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>


<div class="row">
    <div class="col s12">
        <div class="row">
            <div class="input-field col s12">
                <input type="text" id="autocomplete-input" class="autocomplete">
                <label for="autocomplete-input">Autocomplete</label>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Views: 3155

Answers (2)

Cleber Alc&#226;ntara
Cleber Alc&#226;ntara

Reputation: 433

It seems like there is no documentation about this in the plugin. So, one solution would be performing the search yourself based in the selected value (txt parameter of onAutocomplete function).

So, keep a data structure that maps the keys and values, similar to the data option passed to the plugin, and once a value is selected, you use it to find the corresponding value in your data structure and perform the operations you want.

Good luck.

Update

Now they material css providing documentation for the autocomplete but this is available for the version 1.0.0-rc.2 and to view the documentation click here

Upvotes: 3

suchislife
suchislife

Reputation: 1

Well... would you guys say this solution is a.. bit of a hack? Because... for some reason, it just doesn't please the eye for me.

Perhaps I should just wait for their framework to evolve a bit more and just go learn how to create an ajax live search from scratch which shouldn't be hard to find on Google.

function sendItem_OLD(val) {
    console.log(val);
}

function sendItem(ele, e) {
    if (e.isTrigger != undefined) {
        console.log('Key: ' + ele.value + ' | Value: ' + $(ele).nextAll('.dropdown-content').find('img').attr('src'));
    }
}

$(function () {
    $('input.autocomplete').autocomplete({
        data: {
            "Apple": null,
            "John Doe": "465605",
            "Google": "http://placehold.it/250x250"
        },
        limit: 20, // The max amount of results that can be shown at once. Default: Infinity.
    });

});
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>


<div class="row">
    <div class="col s12">
        <div class="row">
            <div class="input-field col s12">
                <input type="text" id="autocomplete-input" class="autocomplete" onchange="sendItem(this, event)">
                <label for="autocomplete-input">Autocomplete</label>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Related Questions