$(document).ready(function(){ var ele_f_key = document.getElementById("from_station"); var ele_t_key = document.getElementById("to_station"); var val = "" var html_result = "" /*可以半自动补全车站名的*/ /*onpropertychange的话,只要当前对象属性发生改变,都会触发事件,但是它是IE专属的; oninput是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于对象时,并非该对象所有属性改变都能触发事 件,它只在对象value值发生改变时奏效。*/ ele_f_key.oninput = function (e) { val = $("#from_station").val(); html_result = "" document.getElementById('list1').innerHTML =html_result; /*判断是不是空可以防止输入拼音时自动报错*/ if (val !== ""){ url1 = "search/"+val $.get(url1,function(result){ a = result.split(',') $.each(a, function(i,item){ html_result += '<option>'+a[i]+'</option>' }); document.getElementById('list1').innerHTML =html_result; }); } }
js代码(前端自己运行的) 前面的定义
1 2 3 4
$(document).ready(function(){ var ele_f_key = document.getElementById("from_station"); var ele_t_key = document.getElementById("to_station"); var data = 自己定义的数据
关键部分更改
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
//更改为利用indexOf()判断字符串里面有关键字就是我想要的数据 ele_f_key.oninput = function (e) { val = $("#from_station").val(); html_result = "" document.getElementById('list1').innerHTML =html_result; //判断是不是空可以防止输入拼音时自动报错 if (val !== ""){ for (var i = 0; i < data.length; i++) { //indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。 console.log(data[i].indexOf(val)) if (val.trim().length > 0 && data[i].indexOf(val) > -1) { html_result += '<option>'+data[i]+'</option>' } } document.getElementById('list1').innerHTML =html_result; } }