Question

您好我有一个项目，其中我必须在输入焦点上填充一个列表...？我们如何在焦点上填充它并在模糊时清空...请仅使用javascript

代码就像：

HTML：

<input type="text" id="inp" />
<div id="populate"></div>

JSON：

var list = [
    { "name" :"abc" },
    { "name" :"abc" },
    { "name" :"abc" },
    { "name" :"abc" },
    { "name" :"abc" },
    { "name" :"abc" }
];

我们如何在焦点上填充它并在模糊时清空...请仅使用javascript

Answer 1

这在JavaScript中非常简单，特别是因为您已经将JSON数据分开，这是关键。

<强> HTML ：

<div id="demo">
  <h2>List population</h2>
  <input>
  <select><option></option></select>
</div>

<强> JS ：

var mod = {
  view: function(state, props) {
    state.input = {
      _onblur: function() {
        state.option = []
      },
      _onfocus: function() {
        state.option = props.list.map(function(v) {
          return {
            _text: v.name
          }
        })
      }
    }
  }
}

以下是完整工作示例的链接：http://jsbin.com/toxopizopa/edit?html,js,output

希望有所帮助！

Answer 2

试试这个：

var doc = document;
var inp = doc.getElementById('inp');
var div = doc.getElementById('populate');


inp.onfocus = function() {
    var ul = doc.createElement('ul');
    ul.id = 'ul';
    div.appendChild(ul);
    for (var k in list) {
        var li = doc.createElement('li');
        li.textContent = list[k].name;
        ul.appendChild(li);
    }
}

inp.onblur = function() {
    (elem = doc.getElementById('ul')).parentNode.removeChild(elem);
}

这里是jsbin https://jsbin.com/pakigezate/edit?html,js,console,output

Answer 3

试试这个：

$("#inp").on('focus',function(){
jQuery.map(list,function(k,v){
    $("#populate").append(v+'<br/>');     
  });

}）;

$（＆＃34;＃INP＆＃34）上（＆＃39;模糊＆＃39;，函数（）{

$("#populate").html("");

}）;

使用json和javascript填充焦点

3 个答案: