新浦京81707con > 注册购买 > ajax补全字段示例,页面版文本框智能提示JS代码

原标题:ajax补全字段示例,页面版文本框智能提示JS代码

浏览次数:175 时间:2019-11-20

ajax来自动补全表单字段示例,ajax补全字段示例

源代码:

脚本一:

<!DOCTYPE html>
<html>
<head>
<title>Auto-fill Form Fields</title>
<link rel="stylesheet"href="script06.css" rel="external nofollow" >
<script src="script06.js"></script>
</head>
<body>
<form action="#">
Please enter your state:<br>
<input type="text" id="searchField" autocomplete="off"><br>
<div id="popups"> </div>
</form>
</body>
</html>

脚本二:

body, #searchfield {
font: 1.2em arial, helvetica,sans-serif;
}
.suggestions {
background-color: #FFF;
padding: 2px 6px;
border: 1px solid #000;
}
.suggestions:hover {
background-color: #69F;
}
#popups {
position: absolute;
}
#searchField.error {
background-color: #FFC;
}

脚本三:

window.onload = initAll;
var xhr = false;
var statesArray = new Array();
function initAll() {
document.getElementById("searchField").onkeyup = searchSuggest;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else {
if (window.ActiveXObject) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) { }
}
}
if (xhr) {
xhr.onreadystatechange = setStatesArray;
xhr.open("GET", "us-states.xml",true);
xhr.send(null);
}
else {
alert("Sorry, but I couldn't create an XMLHttpRequest");
}
}
function setStatesArray() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
if (xhr.responseXML) {
var allStates = xhr.responseXML.getElementsByTagName("item");
for (var i=0; i<allStates.length; i  ) {
statesArray[i] = allStates[i].getElementsByTagName("label")[0].firstChild;
}
}
}
else {
alert("There was a problem with the request "   xhr.status);
}
}
}
function searchSuggest() {
var str = document.getElementById("searchField").value;
document.getElementById("searchField").className = "";
if (str != "") {
document.getElementById("popups").innerHTML = "";
for (var i=0; i<statesArray.length;i  ) {
var thisState = statesArray[i].nodeValue;
if (thisState.toLowerCase().indexOf(str.toLowerCase())== 0) {
var tempDiv = document.createElement("div");
tempDiv.innerHTML = thisState;
tempDiv.onclick = makeChoice;
tempDiv.className = "suggestions";
document.getElementById("popups").appendChild(tempDiv);
}

}
var foundCt = document.getElementById("popups").childNodes.length;
if (foundCt == 0) {
document.getElementById("searchField").className ="error";
}
if (foundCt == 1) {
document.getElementById("searchField").value = document.getElementById("popups").
firstChild.innerHTML;
document.getElementById("popups").innerHTML = "";
}
}
}
function makeChoice(evt) {
if (evt) {
var thisDiv = evt.target;
}
else {
var thisDiv = window.event.srcElement;
}
document.getElementById("searchField").value = thisDiv.innerHTML;
document.getElementById("popups").innerHTML = "";
}

浅析如下:

  1. Please enter your state:<br>
    <input type="text"id="searchField" autocomplete="off"><br>
    <div id="popups"> </div>
    那是大家要注意的HTML代码。此中的超常规之处是autocomplete属性(这一个性子是非标准极其的卡塔尔国。
    它告诉浏览器不要在这里个字段上施行其它活动补全,因为大家将用剧本管理自动补全。与XMLHttp-
    Request同样,就算autocomplete不是其它W3C提出的大器晚成有的,不过它获得了很好的跨浏览器协理。
  2. document.getElementById("searchField").onkeyup = searchSuggest;
    为了捕捉和拍卖每便击键,须要贰个事件管理程序,那是在initAll()中安装的。
  3. xhr.onreadystatechange =setStatesArray;
    xhr.open("GET", "us-states.xml",true);
    xhr.send(null);

4.

if (xhr.responseXML) {
var allStates = xhr.responseXML.getElementsByTagName("item");
for (var i=0; i<allStates.length; i  ) {
statesArray[i] = allStates[i].getElementsByTagName("label")[0].firstChild;
}
}

我们在这里边读取文件,查看种种item节点,搜索当中的label节点,并且存款和储蓄label的firstChild
(州名本人卡塔 尔(英语:State of Qatar)。每种州名存款和储蓄在statesArray数组中的二个因素中。

  1. var str = document.getElementById("searchField").value;
    document.getElementById("searchField").className = "";
    当初始在字段中进行输入时,就能够举办searchSuggest()事件管理程序中的代码。首先得到
    searchField的值,也正是到方今截至已经输入的音讯。接下来,清空那一个字段的class属性。

  2. if (str != "") {
    document.getElementById("popups").innerHTML = "";
    假定还并未有输入任何音信,就不做别的交事务,所以在这里边展开反省,确认保证用户已经输入了有个别值,
    然后再弹出大概值的列表。假使已经输入了有个别新闻,就清空从前的或是值列表。

  3. for (var i=0; i<statesArray.length; i ) {
    var thisState = statesArray[i].nodeValue;
    今昔,遍历州名的列表,并且将日前查阅的州名存款和储蓄在thisState中。
  4. if (thisState.toLowerCase().indexOf(str.toLowerCase())== 0) {
    咱俩盼望检查顾客到方今截至输入的从头到尾的经过是或不是有个别州名的后生可畏都部队分——可是偏偏那样还相当不足,我们
    还非得确定保障输入的开始和结果位于州名的发轫。终究,假如输入了Kansas,你并不期待下拉框中彰显Arkansas
    或Kansas。此外,在进展那项检查时,还在自己商量indexOf()早前确定保证三个字符串都以小写的。
    即使indexOf()再次回到0(相当于说,在thisState的发端地点处找到了输入的字符串卡塔尔,那么我们
    就清楚找到了一个合营。
    9.

    var tempDiv = document.createElement("div"); tempDiv.innerHTML = thisState; tempDiv.onclick = makeChoice; tempDiv.className = "suggestions"; document.getElementById("popups").appendChild(tempDiv);

因为那么些州名是三个大概值,大家期望将它增加到要展现的列表中。达成格局是,创立三个权且
的div,将它的innerHTML设置为那个州名,加多onclick管理程序和className,然后将整个div追
加到popups div中。将各个州名作为单身的div增添,那样我们就能够使用JavaScript和CSS操作每
个州名。

  1. var foundCt = document.getElementById("popups").childNodes.length;
    当遍历完全部州名之后,大家要建构弹出窗口——可是大家拿到了有一点点个州名呢?这里就计算那
    个值:foundCt。
  2. if (foundCt == 0) {
    document.getElementById("searchField").className = "error";
    }
    若是foundCt是0,就注脚顾客输入了不当的剧情。大家将className设置为error,从而让客户
    略知风流洒脱二输入错了,那豆蔻梢头安装会使输入字段彰显浅威安拉阿巴德绿背景(那由脚本13-17中的CSS样式准绳调节卡塔尔国。
    12. 

    if (foundCt == 1) { document.getElementById("searchField").value = document.getElementById ➝("popups").firstChild.innerHTML; document.getElementById("popups").innerHTML = ""; }

只要foundCt是1,大家就掌握找到了唯生机勃勃的匹配,所以能够将以此州名放进字段。倘诺客商已
经输入了ca,他们就不必要再输入lifornia,因为我们已经领会了他们要输入哪个州名。大家应用
popups中唯后生可畏的div填写输入字段,进而自动地提供整机的州名,然后清空popups div。
13.

 function makeChoice(evt) {
if (evt) {
var thisDiv = evt.target;
}
else {

var thisDiv = window.event.srcElement;
}
document.getElementById("searchField").value = thisDiv.innerHTML;
document.getElementById("popups").innerHTML = "";
}

输入州名的另风度翩翩种艺术是,单击弹出列表中的一个州名。在此种状态下,会调用makeChoice()事
件管理程序。首先,我们由此检查事件的目的,查明客商单击了哪位州名,那会提供三个一定的div。
查阅这一个div的innerHTML会提供州名,我们将以此州名放进输入字段。最终,清空恐怕值的弹出
列表。

于是那code便诞生了,如下:

ajax对于google自动补全制作的题材

电动补全不该是以回车未来来剖断 应该是透过你按下键的时候就起来判定当你输入汉语的时候 你连日连夜音字是不会打到文本框中的 当时这几个事件还并未有触发 所以不是经过回车来决断 还有自动补全每输入一个字符就能够发送三次必要在发送央求在此之前应该把早先的文本框清空 还要剖断一下退格键 按下退格键应该让活动补全消失  

复制代码 代码如下:

ajax 自动补全功能够

你的输入框一定是个<input> 吧,input有个onchange事件,文本框里的value改造的时候就能触发onchange事件,你在此个事件里写三个主意,拿ajax去后台查  

源代码: 脚本一: !DOCTYPE htmlhtmlheadtitleAuto-fill Form Fields/titlelink rel="stylesheet"href="script06.cs...

<html xmlns="" >
<head runat="server">
<title>无标题页</title>
<script type="text/javascript" language="javascript">
var currentIndex=-1;//保存提示框中筛选的目录
var sumSearchCount=0;//保存提示框中数据数量
var tempValue="";//保存当前输入的要寻觅的内容
var objTxt="";//保存文本框对象
var top=0;//提示框的top
var left=0;//提醒框的left
var width=0;//提醒框的width
var values = new Array();//保存下拉列表的值
var texts = new Array();//保存下拉列表的展现内容
var tempDiv=new Array();//保存提醒框中索引对应的values索引
//获取下拉列表的值和突显内容
function getSelectValues(ddl){
ddlvalue = document.getElementById("DropDownList1");
for(var i=0;i<ddlvalue.length;i ){
values[i]=ddlvalue.options[i].value;
texts[i]=ddlvalue.options[i].text;
}
}
var oInterval = "";//保存自动计时对象
function fnStartInterval(txt_id){
getSelectValues("DropDownList1");
objTxt=txt_id;//获取输入文本框对象
top = getLength("offsetTop") objTxt.offsetHeight;
left= getLength("offsetLeft");
width=objTxt.offsetWidth;
oInterval = window.setInterval("beginSearch()",二〇〇四);//启用计时
}
//获取对应属性的长度
function getLength(attribute)
{
var offset = 0;
var txt_input = document.getElementById("txtSearch");
while (item)
{
offset = txt_input[attribute];
txt_input = txt_input.offsetParent;
}
return offset;
}
//甘休计时
function fnStopInterval()
{
window.clearInterval(oInterval);
}
//自动完毕提醒
function beginSearch(){
if(objTxt.value.length>0 && tempValue!=objTxt.value)
{
sumSearchCount=0;
tempValue=objTxt.value;
var div_show = document.getElementById("divMsg");
div_show.style.top=top "px";
div_show.style.display="block";
div_show.style.left=left "px";
div_show.style.width=width "px";
div_show.innerHTML="";
var leng = texts.length;
var txt_value = objTxt.value;
var row="";
for(var i=0;i<leng;i ){
if(texts[i].indexOf(txt_value)!=-1){
row = row "<div style="font-size:14px; display:block; width:100%" id='divsearch_" i "' onmouseover="this.style.backgroundColor='#3366CC';currentIndex=" i ";" onmouseout="this.style.backgroundColor='';currentIndex=-1;" onclick="span_click(this)" >" texts[i] "</div>";
tempDiv[sumSearchCount]=i;
sumSearchCount ;
}
}
div_show.innerHTML=row;
}
else if(objTxt.value.length==0 || objTxt.value == null)
{
var div_msg = document.getElementById("divMsg");
div_msg.style.display="none";
div_msg.innerHTML="";
}
}
//提示内容单击保存到文本框中
function span_click(sp)
{
clear();
objTxt.value=sp.innerHTML;
document.getElementById("DropDownList1").options[sp.id.substring(sp.id.indexOf('_') 1,sp.id.length)].selected="selected";
}
//结束查询,关闭提醒
function closeSearch()
{
var tbl = document.activeElement.parentElement;
if(tbl && tbl.id!="divMsg")//幸免利用上下键后不见提醒内容
{
clear();
document.getElementById("divMsg").innerHTML="";
}
else if(currentIndex==-1)
{
clear();
document.getElementById("divMsg").innerHTML="";
}
}
//清空提示
function clear()
{
fnStopInterval();
currentIndex=-1;
tempValue="";
document.getElementById("divMsg").style.display="none";
}
//使用键盘上下方向键和enter键
function changeSelect()
{
var divContent = document.getElementById("divMsg");
if(divContent && divContent.style.display=="block")
{
if (event.keyCode == 38 || event.keyCode == 40 || event.keyCode == 13)
{
if(currentIndex!=-1) document.getElementById("divsearch_" tempDiv[currentIndex]).style.backgroundColor="";
if (event.keyCode == 38 && currentIndex > 0)
{
currentIndex--;
document.getElementById("divsearch_" tempDiv[currentIndex]).style.backgroundColor="#3366CC";
}
else if (event.keyCode == 40 && currentIndex < sumSearchCount-1)
{
currentIndex ;
document.getElementById("divsearch_" tempDiv[currentIndex]).style.backgroundColor="#3366CC";
}
else if (event.keyCode == 13)
{
www4288com新萄京赌场 ,if(currentIndex > -1)
{
var divpart = document.getElementById("divsearch_" tempDiv[currentIndex]);
objTxt.value=divpart.innerHTML;
document.getElementById("DropDownList1").options[tempDiv[currentIndex]].selected="selected";
clear();
}
}
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" id="txtSearch" autocomplete="off" onkeydown="changeSelect()" onfocus="fnStartInterval(this)" onblur="closeSearch()" runat="server" />
<asp:DropDownList ID="DropDownList1" runat="server" DataTextField="slr_realname" DataValueField="systemloginrecord_id" DataSourceID="ObjectDataSource1" Width="130px">
</asp:DropDownList><asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="GetRecordDS"
TypeName="TestDAL"></asp:ObjectDataSource>
</div>
<div style="display:none; z-index:2; text-align:left; position:absolute; border:solid 1px;" id="divMsg">
</div>
</form>
</body>
</html>

本文由新浦京81707con发布于注册购买,转载请注明出处:ajax补全字段示例,页面版文本框智能提示JS代码

关键词: 新浦京81707con

上一篇:新莆京投注网站html5数据库详解,数据持久化

下一篇:没有了