blocks|key|2804020|text|提供onselect处理程序作为options对象的属性onAutocomplete。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2804021|​|2804022|const+options+=+{
++data:+{
++++"All":+null,
++++"Apple":+"https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg",
++++"Google":+"https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%2522G%2522_Logo.svg",
++++"Microsoft":+null
++},
++onAutocomplete:+displayResult('autocompleted+as')
}
const+input+=+document.querySelector('.autocomplete');
const+instances+=+M.Autocomplete.init(input,+options);
const+resultContainer+=+document.querySelector('.result')

function+displayResult(state)+{
++return+function(text)+{
++++resultContainer.innerText+=+"Input+"+%2B+state+%2B+"+"+%2B+text
++}
}|code-block|syntax|javascript|2804023|<link+rel="stylesheet"+href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script+src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>

<p+class="result">Nothing+selected+in+input</p><br>
<div+class="input-field+col+s12">
++<input+type="text"+id="autocomplete-input"+class="autocomplete"+onchange="displayResult('changed+to')(this.value)">
++<label+for="autocomplete-input">Autocomplete</label>
</div>|2804024|2804025|entityMap^0|S|E|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|V|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|Q|$]]

<p>Provide your onselect handler as the property <code>onAutocomplete</code> of the options object.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const options = {
  data: {
    "All": null,
    "Apple": "https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg",
    "Google": "https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg",
    "Microsoft": null
  },
  onAutocomplete: displayResult('autocompleted as')
}
const input = document.querySelector('.autocomplete');
const instances = M.Autocomplete.init(input, options);
const resultContainer = document.querySelector('.result')

function displayResult(state) {
  return function(text) {
    resultContainer.innerText = "Input " + state + " " + text
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css"&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"&gt;&lt;/script&gt;

&lt;p class="result"&gt;Nothing selected in input&lt;/p&gt;&lt;br&gt;
&lt;div class="input-field col s12"&gt;
  &lt;input type="text" id="autocomplete-input" class="autocomplete" onchange="displayResult('changed to')(this.value)"&gt;
  &lt;label for="autocomplete-input"&gt;Autocomplete&lt;/label&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2344247|text|您是否尝试过以这种方式添加onAutocomplete函数|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2344248|$('input.autocomplete').autocomplete({
++++++data:+{
++++++++"Apple":+null,
++++++++"Microsoft":+null,
++++++++"Google":+'https://placehold.it/250x250'
++++++},
++++++onAutocomplete:+function(val)+{
++++++++++console.log(val);
++++++}
++++});|code-block|syntax|javascript|2344249|​|2344250|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>have you tried by adding onAutocomplete function in this way
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('input.autocomplete').autocomplete({
      data: {
        "Apple": null,
        "Microsoft": null,
        "Google": 'https://placehold.it/250x250'
      },
      onAutocomplete: function(val) {
          console.log(val);
      }
    });</code></pre>
</div>
</div>
</p>


<p>I am using <a href="https://materializecss.com/autocomplete.html" rel="nofollow noreferrer">autocomplete</a> feature of materialize css.</p>

<p>I am able to trigger a server call from the input field and getting the JSON data and able to display the result. But I am not able to trigger event by onselect of the autocomplete item.</p>

<p>My code for user input:</p>

<pre><code>&lt;input placeholder="Search ..." class="autocomplete" type="text" (keyup)="onKey($event)"&gt;
</code></pre>

<p>The onKey() getting the server data and displaying the result as below:</p>

<p><a href="https://i.stack.imgur.com/tTjIn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tTjIn.png" alt="enter image description here"></a></p>

<p>The problem i am facing is while on select of any drop down value to get the selected value</p>


How can I trigger an event by onselect of autocomplete element of materialize css

服务器

JSON

我正在使用materialize css的特性。我能够从输入字段触发服务器调用，并获得JSON数据并显示结果。但是我不能通过onselect自动完成项来触发事件。我的用户输入代码：<input placeholder="Search ..." class="autocomplete" type="text" (keyu...

问如何通过materialize css的autocomplete元素的onselect触发事件
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何通过materialize css的autocomplete元素的onselect触发事件EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何通过materialize css的autocomplete元素的onselect触发事件
EN