2. 程式人生 > >帶搜尋圖示的文字框

帶搜尋圖示的文字框

阿新 • • 發佈：2019-01-08

1、效果圖

2、HTML 程式碼

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="IndusJS/jquery.min.js"></script>
    <
 
style type="text/css">
.inputAttr1{
    background: url("images/sxmcx.png") no-repeat 265px ;
    width: 300px;
    height: 41px;
    border-radius:5px;
    border: 1px solid #999999;
    box-shadow: 1px 1px 3px #cccccc;
    padding-left: 10px;
    margin-right: 10px;
}
.inputAttr2{  
    width
 
: 255px;
    height: 35px; 
  margin-right:10px;
  border:none;
  line-height:35px;
}
        input,img
        {
            vertical-align:middle;
        }
    </style>
    <script type="text/javascript">

        function search()
        {
            alert('查詢結果正確');
        }
    
 
</script>
</head>
<body>
    <form id="form1" runat="server">  
        <input type="text" class="inputAttr1" name="activityUserValue"  placeholder="註冊郵箱/使用者名稱"/>
        <div style="width:310px;height:38px;border: solid 1px;">
            <input type="text" class="inputAttr2"  placeholder="專案/企業查詢"/>
            <img style="height:36px; cursor:pointer;" onclick="search()" src="images/sxmcx.png" />
        </div>
    </form>
</body>
</html>

 3、搜尋圖示

相關推薦

帶搜尋圖示的文字框

1、效果圖 2、HTML 程式碼   <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv=

關於三種帶搜尋下拉框的對比說明（searchableSelect、TinySelect、combobox)

searchableSelect 實測缺點 在搜尋中無法進行精準搜尋，只允許進行模糊搜尋 存在多個搜尋結果時在列表中標記顯示，無法進行全部顯示，使用者體驗不佳 不支援onchange事件，但是在屬性中提供了替代onchange的屬性 使用說明 1.第

C#帶按鈕的文字框TextBoxContainButton

引用自：https://www.cnblogs.com/yepoint/p/7238667.html 以作學習，等我寫好了我的控制元件也出個教程 經常需要用到各種組合控制元件，每次組合太麻煩，通過打包成自定義控制元件，方便呼叫。 帶按鈕的文字框，如下圖： 文字框內可以輸入

文字框裡如何帶上圖示和文字提示

這裡是一個輸入框，裡面有提示文字的同時，還有一個小圖示。這裡我的做法是使用一個父元素包裹住文字框，利用父級元素的背景圖片來完成小圖示的實現。提示文字部分則使用文字框的placeholder來解決。 參考程式碼如下： HTML部分： <div class="

Android定製控制元件：帶圖示的TextView和可編輯文字框（附專案原始碼）

各位朋友，博主向大家問好啦！ 初次見面，多多關照。 博主正在學習移動開發，今天老師教授的是定製控制元件：帶圖示的TextView， 然後課後依葫蘆畫瓢，博主定製了一個帶圖示的可編輯文字框，其實原理都一樣！ 博主覺得該課題具有可鑑意義，特此分享給大家，幫助入門級開發人員，大蝦

搜尋文字框

當文字框裡有placeholder屬性時，獲得焦點，沒有清空文字框 <input type="text" placeholder="請輸入搜尋關鍵字" id="txtSearch"> <input type="button" value="搜尋" id="btnSe

js控制文字框回車提交表單進行搜尋

// 此段程式碼為示例程式碼 並不能執行 ，若需使用請根據實際情況做出更改 <form action="/PayBills/billContentList" method="post" id="searchForm" autocomplete="off" onkeypress="if(

chosen(下拉列表帶搜尋外掛)和layer(彈出框外掛)在一起使用會有衝突，解決辦法

可以選擇用window.open()和chosen外掛結合使用，這樣就不會有衝突。   chosen外掛的使用： 1、先把js和css檔案引用到網頁裡面去： <link href="js/jqueryUI/chosen/chosen.css" ty

Android搜尋框自動提示文字框——（單一提示）

AutoCompleteTextView(單一提示) package com.example.android_06; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import androi

android實現帶下拉列表的文字框

android實現帶下拉列表的文字框 keywords：android studio、EditText、ImageView、PopupMenu。 佈局 <TextView android:layout_width="wrap_c

yii2 gridview 中 filter設定帶搜尋的下拉框[轉載]

原文地址： https://stackoverflow.com/questions/36937615/kartik-select2-as-filter-input-in-yii2-grid 程式碼如下： 引入select2外掛: use kartik\select2\Selec

帶搜尋框的導航欄

<!DOCTYPE html > <html> <head> <meta charset="utf-8"> <title>自學教程

帶搜尋框導航欄--帶提交按鈕

<!DOCTYPE html > <html> <head> <meta charset="utf-8"> <title>自學教程(如約智惠.com)</title> <meta

muti-select 外掛簡單使用(帶搜尋框)

效果圖:   需要Bootstrap基礎檔案+jq Html: <div class="form-group">     <label class="col-sm-4 control-label"><span           

easyUI combobox 文字框模糊搜尋問題

優點：ajax 非同步獲取資料，動態繫結，支援半模糊查詢（順序查詢） 缺點：不支援純模糊查詢 上圖：           html 頁面程式碼 <input class="easyui-

使 select 滑動框 帶搜尋功能

引入了 select2 外掛 // 線上引用 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /> <

android_文字框實現搜尋和清空效果

前言 　　本文實現的效果：文字框輸入為空時顯示輸入的圖示；不為空時顯示清空的圖示，此時點選清空圖示能清空文字框內輸入文字。 正文 　　一、實現效果 　　　　 　　　　　　　 　　二、實現程式碼  　　　　監聽輸入 /**      * 動態搜尋    

android自定義文字框，後面帶清空按鈕

class MyEditText extends EditText { private final String TAG = "MyEditText"; private Drawable dRight; private Rect rBounds; // 構造器 public MyEditText(Conte

Android EditText 文字框實現搜尋和清空效果

前言 　　本文實現的效果：文字框輸入為空時顯示輸入的圖示；不為空時顯示清空的圖示，此時點選清空圖示能清空文字框內輸入文字。 宣告 　　歡迎轉載，但請保留文章原始出處:)  　　　　部落格園：http://www.cnblogs.com 　　　　農民伯伯： http://over140.cnblogs.

在word2010中新增帶滾動條的文字框

由於檔案內容過長，為了加強文章的可讀性，可以新增一個帶滾動條的文字框，既能使文章看起來乾淨整潔，同時也極大的提高了文章的可讀性。  我這裡對在word2010中文字框帶滾動條作個介紹： 1. 開啟word後，點選“檔案”選單，在下列列表中找到“選項”一欄，在彈出的視窗中找到‘自定義