iuput属性

1.input输入框事件

// onfocus:当元素获取到焦点的时候触发
//onblur:当元素失去焦点的时候

//onchange:当光标消失的时候，触发一次

//标准：oninput:边输入时边连续触发
 //ie:onpropertychange:边输入时边连续触发

// obj.focus();给指定元素设置焦点
// obj.blur();取消指定元素的焦点

//obj.select();只能选择用户输入的内容

2.搜索制作

点击input出现下列列表和按钮进行搜索, select标签也可以传入form表单,添加一个name="fname"

\blog\templates\include\nav.html

<form class="form-inline my-2 my-lg-0" action="{% url 'home:search' %}" method="get">



            <input class="form-control mr-sm-2"  type="search" name="q" placeholder="搜索关键词" aria-label="Search" onfocus="myFunctioninput(1)">
            <select class="source" name="fname" style="display: none; margin-right: 7px">
                     <option value="0"  >精确搜索</option>
                     <option value="1" >模糊搜索</option>
             </select>

            <button class="btn btn-outline-success my-2 my-sm-0" style="display: none" id = "search_button" type="submit">搜索</button>
        </form>

js实现让下拉列表和按钮出现 

function myFunctioninput(x) {
        $(document.getElementsByClassName('source')).css({"display":"inline"});
        $(document.getElementById("search_button")).css({"display":"inline"});
}