下拉搜尋框

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

1、前言

開發中使用了一種下拉搜尋的外掛，感覺簡單好用就記錄下來，以備日後使用。

2、示例及說明

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>下拉搜尋</title>
        <link rel="stylesheet" href="js/chosen/chosen.css" />
    </head>
    <body>
        <!-- 
        data-placeholder:類似於是input標籤的placeholder，沒有值的使用顯示。
        --> 

        <select data-placeholder="選擇城市" class="select-chosen">
            <!-- 只用第一個option值為空的時候才會顯示data-placeholder的值，否則顯示第一個option的值 -->
            <option value=""></option>
            <option value="1">上海</option>
            <option value="2">北京</option 
>
            <option value="3">深圳</option>
            <option value="4">西安</option>
            <option value="5">寶雞</option>
            <option value="6">商洛</option>
            <option value="7">銅川</option>
            <option value="8" 
>安康</option>
            <option value="9">渭南</option>
            <option value="10">遼寧</option>
            <option value="11">大連</option>
            <option value="12">南京</option>
            <option value=13"">杭州</option>
            <option value=14"">西寧</option>
        </select>
    </body>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
    <script type="text/javascript" src="js/chosen/chosen.jquery.min.js" ></script>
    <script type="text/javascript">
        $(function(){
            //給select標籤繫結下拉搜尋事件（可自定義引數，具體參考官方文件）
            $(".select-chosen").chosen({
                no_results_text: "沒有找到搜尋的結果!",//沒有搜到結果時顯示的值
                width: "250px",//下拉選框的寬度
                allow_single_deselect: true //選擇後允許編輯
            });
        });
    </script>
</html>

3、效果展示

這裡寫圖片描述

4、注意事項

下載依賴的js後，需要引入js、css還有兩張png圖片，如下圖：

這裡寫圖片描述

5、參考資料

官方資料
原始碼下載：https://github.com/harvesthq/chosen
js下載：https://harvesthq.github.io/chosen/
文件參考：https://harvesthq.github.io/chosen/options.html
技術部落格：http://blog.csdn.net/xiaozhu0301/article/details/46646035

下拉搜尋框

1、前言開發中使用了一種下拉搜尋的外掛，感覺簡單好用就記錄下來，以備日後使用。 2、示例及說明 <!DOCTYPE html> <html> <head> <meta charset="utf-8"

jQuery-searchableSelect(下拉搜尋框)

帶搜尋框的jQuery下拉框美化外掛 searchableSelect，一個簡單而人性化的jQuery外掛，為select下拉框建立一個搜尋欄來快速篩選出你想要的內容，支援切換操作。效果圖：

JS編寫input搜尋框，類似下拉搜尋框

因為工作需求，要在一個OA系統嵌入頁面，查詢相關OA系統的jquery版本，是1.4.4，版本過低，沒辦法引用現有的優秀的下拉搜尋框的框架，導致需要自己寫一個簡易的下拉搜尋框。程式碼如下，親測，有效： <!DOCTYPE html> <html lang

下拉搜尋框外掛

下拉搜尋框時用的也比較多，但是也不會自己寫，所以下載外掛比較方便同樣，我下載的是silviomoreto-bootstrap這個外掛，找不到地址了，你們自己去找吧同樣，也是把他放到專案/public/static/ext底下，然後繼續在專案/app/admin/view/la

select2下拉搜尋框匹配漢字全拼及首字母

（注：原文出自qq_33142257的部落格http://blog.csdn.net/qq_33142257/article/details/52575823）最近，專案中需要在使用選擇搜尋框時進行漢字全拼及首字母的匹配搜尋。專案使用了select2外掛，外掛本身不支援

初始化表單（保留搜尋提交之後下拉選框預設值的方法）

做的專案某頁面需要有一個搜尋，希望在我選擇下拉選框的某個值提交，返回結果之後，之前提交的值預設selected。 html程式碼如下： <form class="well form-inline margin-top-20" id="form" meth

表單測試-單選按鈕、複選框、下拉列表框、搜尋框填充域驗證點

1.單選按鈕測試常見驗證點單選按鈕常在註冊新使用者選擇性別處用到，單選按鈕測試常見驗證點如下： 1.一組單選按鈕不能同時選中，只能選中一個 2.逐一執行每個單選按鈕的功能。分別選擇“男”、“女”後，儲存到資料庫的資料應該分別為“男”、“女”。 3.一組執行同一個功能

帶搜尋功能的下拉選擇框select2

ObjectARX對話框添加顏色下拉組合框

alt ring 屬性 drop ngs -1 ner VS2010 1-1 建立Arx基本對話框,最好是基於CAcUidialog類. 首先添加combox控件更改一下屬性: 先修改Owner Draw為Fixed,再更改Has Strings 為true Has Str

下拉列表框【安卓3】

pan activity border cin left 資源 pro 內容 1.0 Spinner（下拉列表框）方法描述 CharSequence getPrompt () 取得提示文字 void setPrompt(CharSeque

Select下拉選擇框

tex max 下拉選擇框 query move size nbsp 獲取位置 var checkText=$("#select_id").find("option:selected").text(); //獲取Select選擇的Text var checkVal

javascript 向下拉列表框select添加選項option

下拉 select cnblogs ntb rip cti 下拉列表框 nbsp span 1 var select= document.getElementById("selectid"); 2 var objOption = document.createElemen

jeecg3.7中DictSelect數據字典下拉選擇框的用法

clas name vcl val title tco sql 文本 sel 1、參數屬性名類型描述

objectARX 添加線型下拉組合框空間 CAcUiLineTypeComboBox

clas com 打開 x86 找到 toc png ima class 不知道是有意還是無意，objectARX的所有文檔中，居然沒有CAcUiLineTypeComboBox，而實際上這個是存在的。位於\inc\acuiComboBox.h 而在添加變量的向導中

省市區、民族下拉列表框

文字 tro -c 提示信息 ons ati doc nbsp 級聯省市縣插件PCASClass.js的基本使用方法 <select id="Province" name="Province"></select> <select id="C

jq自定義多選下拉列表框

多選 img 插件國家 http 分享 class 下拉 blog 多選選擇國家插件 https://gitee.com/richard1015/dropDownList jq自定義多選下拉列表框

Html頁面中select下拉列表框別樣用法，一個方法一勞永逸。

select 異步加載很多時候，我們寫from表單面，給select標簽賦值，都采用這種方式：1.MVC中設創建公共的分部視圖；2.直接在前臺面中，插入片段後臺代碼；今天我利用HTML5中的自定義屬性，結合JQ擴展方法，寫一個通用的JS方法，JS代碼如下： $.fn.SetSelect = funct

微信小程序的按下擡起事件，下拉選擇框的事件及點擊確定的方法函數，獲取時間的方法，省市區的方法。

bin img util req fun data hang UNC 日期擡起按下的事件：擡起事件： bind:touchstart="nanOne" 把這條屬性放到標簽裏就可以了在JS中 nanOne: function () { 　　　　this.setDa

django前端頁面下拉選擇框預設值設定

1，前端樣式 2，前端html程式碼 <select name="row.status"> <option value="ON" {% if row.status == 'ON' %} selected="selected" {% endif %}>

select下拉選擇框實現迴圈遍歷資料庫

<select class="form-control input-medium" id="organ"> <option value="">所屬部門</option> <c:forEach var="organ"

下拉搜尋框

相關推薦