搜索框提示列表问题

在实现如下功能的时候,当输入为aj的时候需要将下面的列表删除然后创建新的列表在将后台的数据导入列表

但是在删除列表的时候我写了如下代码:

  function clearLi(){
        var content_ul = document.getElementById("moreword");
        var ul_childs = content_ul.childNodes;
        var len = ul_childs.length;
        for(var i = 0; i < len; i++){
            content_ul.removeChild(ul_childs[i]);
        }
    }

但是发现有点毛病:

看着这些数据,于是恍然大悟,应该是在删除第一个node节点后,后面的节点会一一向前进一位(大概是这么个意思吧)所以为了证明我的想法我写了如下代码:

    function clearLi(){
        var content_ul = document.getElementById("moreword");
        var ul_childs = content_ul.childNodes;
        var len = ul_childs.length;
        for(var i = 0; i < len; i++){
            content_ul.removeChild(ul_childs[0]);
        }
    }

效果如下:

一下子就好了,所以我的想法没得错误。

解决方案:  1. 只删除第一个node节点;

         2. 在删除节点的时候,可以从最后一个开始遍历删除。代码如下:

    function clearLi(){
        var content_ul = document.getElementById("moreword");
        var ul_childs = content_ul.childNodes;
        var len = ul_childs.length;
        for(var i = len-1; i >= 0; i--){
            content_ul.removeChild(ul_childs[i]);
        }
    }
时间: 2024-10-13 19:49:52

搜索框提示列表问题的相关文章

“百度搜索框提示”代码

使用方法: 百度提供了2种自定义调用的方法方法一: 第一步为需要添加“百度搜索框提示”功能的<input>标签添加baiduSug属性.例如:<input type=”text” name=”word” baiduSug=”1|2″>当设置baiduSug=1时,用户选中sug词条时默认执行表单提交动作:当设置baiduSug=2时,用户选中sug词条时不执行表单提交动作.       第二步      在网页中引入Javascript文件: <script charset=

站长工具|百度搜索框提示功能

百度向站长开放免费“百度搜索框”代码和“百度搜索框提示”代码.只需进行简单的设置, 即可将“ 百度搜索框( 带提示功能)”功能快速加入到您的网页中.提升用户在网站中的搜索体验. 根据不同类型的网站需求,站长工具一共提供三种引入方式供您选择: 简单方式——方便的将“百度搜索框(带提示功能)”直接加入到您的网页中.将以下代码加入到您的网页中,即可获得带有“搜索框提示”功能的百度搜索框 HTML代码: <form action=”http://www.baidu.com/baidu” target=”

百度搜索框提示

方法一: 第一步 为需要添加“百度搜索框提示”功能的<input>标签添加baiduSug属性.例如:<input type=”text” name=”word” baiduSug=”1|2″> 当设置baiduSug=1时,用户选中sug词条时默认执行表单提交动作: 当设置baiduSug=2时,用户选中sug词条时不执行表单提交动作. 第二步 在网页中引入Javascript文件:<script charset=”gbk” src=”http://www.baidu.co

jQuery实现TEXT文本框输入时的提示信息(谷歌百度淘宝搜索框提示实现)

在搜索框中,输入之前框内有输入的提示信息,文本框获得焦点后会自动消失的效果,效果图如下: 鼠标放在文本框时的效果: 创建工具类(已经存在就不用创建了)Util.js(DWR的JS) 在里面添加如下方法: Js代码 /** * Input框里的灰色提示,使用前先引入jquery * <br>使用方法:<input type="text" tipMsg="您的用户名"   /> * * @return */ function inputTipTe

原生AJAX+jsp+servlet实现百度搜索框提示效果

我们这里使用HTML5的新特性datalist实现输入框的自动下拉提示,用datalist通过id与input关联起来,在搜索时就会出现下拉框.下面是HTML代码. <!-- 输入框 --> <input type="text" size="50" id="search" name="search" list="browser" onkeyup="search()" o

js:ajax的get方法实现简单的搜索框提示

效果演示: 一,使用nodejs搭建后台环境,通过ajax的get方法将文本框中的值,实时传输到后台进行比较,后台返回相应的结果,将结果返回到ul中 1,创建路由 app4.js /** * Created by dyb on 2018/1/2. */ var express = require('express'); var fs= require('fs'); var url = require('url'); var app = express(); var mysql = require

设计input搜索框提示文字点击消失的效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

js借助JSONP实现百度搜索框提示效果

主要借助百度搜索的API,调用时会存在跨域问题,需要通过JSONP来解决这个问题,代码如下(代码中部分使用ES6语法): HTML <input type="text" id="input"> <div id="text"></div> js: document.querySelector('#input').oninput = function () { let val = this.value; jsonp

jquery+ajax 实现搜索框提示

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #search_result{ width:302px; position:absolute; left:618px; top:180px; z-index:1; overflow:hidden;