Javascript 我的html仅在一个输入框中显示脚本中的内容_Javascript_Php_Css_Html

Javascript 我的html仅在一个输入框中显示脚本中的内容

javascript php css html

Javascript 我的html仅在一个输入框中显示脚本中的内容,javascript,php,css,html,Javascript,Php,Css,Html,所以我想要的是在多个输入选项卡上显示内容。这是我的html正文，我已经尝试使用I框架，但它不会溢出的权利！我想显示缩写的下拉列表，请帮助： <div class="form-group"> <label class="control-label">Enter an Airport</label> <input id="autocomplete" type="text" /> </div> <div class="form-gr

所以我想要的是在多个输入选项卡上显示内容。这是我的html正文，我已经尝试使用I框架，但它不会溢出的权利！我想显示缩写的下拉列表，请帮助：

<div class="form-group">
<label class="control-label">Enter an Airport</label>
<input id="autocomplete" type="text" />
</div>

<div class="form-group">
<label class="control-label">Another field (so we can test TAB behavior)
</label>
<input type="text" />
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.1/lodash.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://unpkg.com/fuse.js@2.5.0/src/fuse.min.js'></script>
<script src='https://screenfeedcontent.blob.core.windows.net/html/airports.js'></script>

<script  src="js/index.js"></script>

这是我的javascript：

 var options = {
 shouldSort: true,
 threshold: 0.4,
 maxPatternLength: 32,
 keys: [{
    name: 'iata',
    weight: 0.5
 }, {
    name: 'name',
    weight: 0.3
  }, {
     name: 'city',
   weight: 0.2
  }]
};

var fuse = new Fuse(airports, options)


var ac = $('#autocomplete')
  .on('click', function(e) {
    e.stopPropagation();
 })
  .on('focus keyup', search)
  .on('keydown', onKeyDown);

var wrap = $('<div>')
  .addClass('autocomplete-wrapper')
  .insertBefore(ac)
  .append(ac);

var list = $('<div>')
  .addClass('autocomplete-results')
  .on('click', '.autocomplete-result', function(e) {
    e.preventDefault();
    e.stopPropagation();
    selectIndex($(this).data('index'));
  })
  .appendTo(wrap);

$(document)
  .on('mouseover', '.autocomplete-result', function(e) {
    var index = parseInt($(this).data('index'), 10);
    if (!isNaN(index)) {
      list.attr('data-highlight', index);
    }
  })
  .on('click', clearResults);

function clearResults() {
  results = [];
  numResults = 0;
  list.empty();
}

function selectIndex(index) {
  if (results.length >= index + 1) {
    ac.val(results[index].iata);
    clearResults();
  }  
}

var results = [];
var numResults = 0;
var selectedIndex = -1;

function search(e) {
  if (e.which === 38 || e.which === 13 || e.which === 40) {
    return;
  }

   if (ac.val().length > 0) {
     results = _.take(fuse.search(ac.val()), 7);
     numResults = results.length;

     var divs = results.map(function(r, i) {
         return '<div class="autocomplete-result" data-index="'+ i +'">'
              + '<div><b>'+ r.iata +'</b> - '+ r.name +'</div>'
              + '<div class="autocomplete-location">'+ r.city +', '+ r.country +'</div>'
              + '</div>';
      });

     selectedIndex = -1;
     list.html(divs.join(''))
       .attr('data-highlight', selectedIndex);

   } else {
     numResults = 0;
     list.empty();
   }
 }

 function onKeyDown(e) {
   switch(e.which) {
     case 38: // up
       selectedIndex--;
       if (selectedIndex <= -1) {
         selectedIndex = -1;
       }
       list.attr('data-highlight', selectedIndex);
       break;
     case 13: // enter
       selectIndex(selectedIndex);
       break;
     case 9: // enter
       selectIndex(selectedIndex);
       e.stopPropagation();
       return;
     case 40: // down
       selectedIndex++;
       if (selectedIndex >= numResults) {
         selectedIndex = numResults-1;
       }
       list.attr('data-highlight', selectedIndex);
       break;

     default: return; // exit this handler for other keys
   }
   e.stopPropagation();
   e.preventDefault(); // prevent the default action (scroll / move caret)
 }

var选项={
应该排序：是的，
阈值：0.4，
最大模式长度：32，
关键点：[{
名称：“国际航空运输协会”，
重量：0.5
}, {
姓名：'姓名'，
重量：0.3
}, {
名称：'城市'，
重量：0.2
}]
};
var保险丝=新保险丝（机场、选装件）
var ac=$（“#自动完成”）
.on（'click'，函数（e）{
e、 停止传播（）；
})
.on（'focus keyup'，search）
.on（'keydown'，onKeyDown）；
var wrap=$（''）
.addClass（'autocomplete-wrapper'）
.insertBefore（ac）
.附加（ac）；
变量列表=$（''）
.addClass（'autocomplete-results'）
.on（'click'，'autocomplete result'，函数（e）{
e、 预防默认值（）；
e、 停止传播（）；
选择index（$（this.data（'index'））；
})
.附件（包装）；
$（文件）
.on（'mouseover'，'.autocomplete result'，函数（e）{
var index=parseInt（$（this）.data（'index'），10）；
如果（！isNaN（索引））{
list.attr（“数据突出显示”，索引）；
}
})
。打开（“单击”，清除结果）；
函数clearResults（）{
结果=[]；
numResults=0；
list.empty（）；
}
函数selectIndex（索引）{
如果（results.length>=索引+1）{
ac.val（结果[指标].iata）；
clearResults（）；
}  
}
var结果=[]；
var numResults=0；
var selectedIndex=-1；
功能搜索（e）{
如果（e.which==38 | | e.which==13 | | e.which==40）{
返回；
}
如果（ac.val（）.length>0）{
结果=u.take（fuse.search（ac.val（）），7）；
numResults=results.length；
var divs=results.map（函数（r，i）{
返回“”
+'+r.iata+'-'+r.name+''
+“+r.城市+”，“+r.国家+”
+ '';
});
selectedIndex=-1；
html（divs.join（“”））
.attr（'data-highlight'，selectedIndex）；
}否则{
numResults=0；
list.empty（）；
}
}
函数onKeyDown（e）{
开关（e.which）{
案例38://以上
选择索引--；
如果（selectedIndex=numResults）{
selectedIndex=numResults-1；
}
list.attr（'data-highlight'，selectedIndex）；
打破
默认值：return；//退出其他键的处理程序
}
e、 停止传播（）；
e、 preventDefault（）；//防止默认操作（滚动/移动插入符号）
}

我认为问题在于css！

我甚至尝试用其他名称复制文件和函数，并将其集成到另一个html文件中，但仍然不起作用

我有这个工作，但如果你创建另一个相同的输入类型的字段，它不会显示我的下拉列表！这是我的主要问题，我有这个工作，但如果你创建另一个相同的输入类型的字段，它不会显示我的下拉列表！这是我的主要问题

 var options = {
 shouldSort: true,
 threshold: 0.4,
 maxPatternLength: 32,
 keys: [{
    name: 'iata',
    weight: 0.5
 }, {
    name: 'name',
    weight: 0.3
  }, {
     name: 'city',
   weight: 0.2
  }]
};

var fuse = new Fuse(airports, options)


var ac = $('#autocomplete')
  .on('click', function(e) {
    e.stopPropagation();
 })
  .on('focus keyup', search)
  .on('keydown', onKeyDown);

var wrap = $('<div>')
  .addClass('autocomplete-wrapper')
  .insertBefore(ac)
  .append(ac);

var list = $('<div>')
  .addClass('autocomplete-results')
  .on('click', '.autocomplete-result', function(e) {
    e.preventDefault();
    e.stopPropagation();
    selectIndex($(this).data('index'));
  })
  .appendTo(wrap);

$(document)
  .on('mouseover', '.autocomplete-result', function(e) {
    var index = parseInt($(this).data('index'), 10);
    if (!isNaN(index)) {
      list.attr('data-highlight', index);
    }
  })
  .on('click', clearResults);

function clearResults() {
  results = [];
  numResults = 0;
  list.empty();
}

function selectIndex(index) {
  if (results.length >= index + 1) {
    ac.val(results[index].iata);
    clearResults();
  }  
}

var results = [];
var numResults = 0;
var selectedIndex = -1;

function search(e) {
  if (e.which === 38 || e.which === 13 || e.which === 40) {
    return;
  }

   if (ac.val().length > 0) {
     results = _.take(fuse.search(ac.val()), 7);
     numResults = results.length;

     var divs = results.map(function(r, i) {
         return '<div class="autocomplete-result" data-index="'+ i +'">'
              + '<div><b>'+ r.iata +'</b> - '+ r.name +'</div>'
              + '<div class="autocomplete-location">'+ r.city +', '+ r.country +'</div>'
              + '</div>';
      });

     selectedIndex = -1;
     list.html(divs.join(''))
       .attr('data-highlight', selectedIndex);

   } else {
     numResults = 0;
     list.empty();
   }
 }

 function onKeyDown(e) {
   switch(e.which) {
     case 38: // up
       selectedIndex--;
       if (selectedIndex <= -1) {
         selectedIndex = -1;
       }
       list.attr('data-highlight', selectedIndex);
       break;
     case 13: // enter
       selectIndex(selectedIndex);
       break;
     case 9: // enter
       selectIndex(selectedIndex);
       e.stopPropagation();
       return;
     case 40: // down
       selectedIndex++;
       if (selectedIndex >= numResults) {
         selectedIndex = numResults-1;
       }
       list.attr('data-highlight', selectedIndex);
       break;

     default: return; // exit this handler for other keys
   }
   e.stopPropagation();
   e.preventDefault(); // prevent the default action (scroll / move caret)
 }