js拼音快查combox,查詢的拼音怎麼打

本文目錄一覽：

• 1、JS實現輸入拼音搜索中文列表
• 2、邊輸入拼音邊查找匹配的項目怎樣實現
• 3、exjs, combox 如何設置默認值保存到數據庫里
• 4、js動態添加input標籤 easyui combox
• 5、javascript中文按照拼音首字母排序，如何實現？
• 6、急!!!Combox按拼音查詢

JS實現輸入拼音搜索中文列表

最近工作中接到了一個需求：一個項目列表，項目名稱可能有中文可能有英文，如果是中文的話，需要實現用戶輸入項目的拼音即可篩選到對應項目的功能。

完成了之後覺得可以在公眾號里給大家分享一下，給有需要的人一個參考吧。

項目框架用的是react，所以先creat-react-app

比如create-react-app pinyin

渲染選擇框的組件用的是antd的Select組件，所以需要先引入antd，具體引入的方法參照antd官方文檔，已經寫得很清楚了

以上準備工作做好後，目前的目錄結構應該如下圖所示：

├── README.md

├── package.json

├── package-lock.json

├── config-overrides.js

├── public

│    ├── favicon.ico

│    ├──index.html

      └── manifest.json

├── src

│   ├── App.css

│   ├── App.js

│   ├── App.test.js

│   ├── index.css

│   ├── index.js

│   ├──logo.svg

│   └── registerServiceWorker.js

現在在src文件夾下新建一個components文件夾，components文件夾中新建一個SelectPinYin文件夾，SelectPinYin文件夾下新建一個index.js和PinYin.js

PinYin.js文件中主要放置拼音和各個拼音對應的中文字符串，方便組件調用

export const SimplePinYin = {

py: [

        [ ‘a’,’阿啊呵腌吖錒啊呵嗄啊呵啊呵阿啊呵’ ],

        [ ‘ai’,’哀挨埃唉哎捱鎄呆挨癌皚捱矮哎藹靄噯愛礙艾唉哎隘曖噯璦嗌嬡砹’ ],

        [ ‘an’,’安諳鞍氨庵桉鵪廠俺銨揞垵案按暗岸黯胺犴’ ],

        [ ‘ang’,’骯昂盎’ ],

        [ ‘ao’,’熬凹熬敖囂嗷鏖鰲翱獒聱螯廒遨襖拗媼奧澳傲懊坳拗驁嶴鏊’ ],

        [ ‘ba’,’八吧巴叭芭扒疤笆粑岜捌八拔跋茇菝魃把靶鈀把爸罷霸壩耙灞鮁吧罷’ ],

        [ ‘bai’,’掰白百擺伯柏佰捭敗拜唄稗’ ],

        [ ‘ban’,’般班搬斑頒扳瘢癍版板阪坂鈑舨辦半伴扮瓣拌絆’ ],

        [ ‘bang’,’幫邦浜梆膀榜綁棒膀傍磅謗鎊蚌蒡’ ],

[ ‘bao’,’包胞炮剝褒苞孢煲齙薄雹保寶飽堡葆褓鴇報暴抱爆鮑曝刨瀑豹趵’ ],

        [ ‘bei’,’背悲杯碑卑陂埤萆鵯北被備背輩倍貝蓓憊悖狽焙邶鋇孛碚褙鐾鞴臂唄’ ],

…

]

}

內容太多，只能複製這樣一小部分，其餘部分可以參考下面這條鏈接，然後改成上面那種格式就可以了。

接下來開始寫組件

要做到拼音搜索匹配到中文，所以調用this.selectPinYin函數，下面開始寫selectPinYin函數

當input為中文時：

return option.props.children.toLowerCase().indexOf( input.toLowerCase() ) = 0;

當input為字母時：

const value = option.props.children.toLowerCase().split( ” );

const newValue = value.map( item = this.chineseChangePY( item ) ).join( ” );

return newValue.indexOf( input.toLowerCase() ) = 0;

思路：

①    將列表中的每項內容，即option.props.children轉成小寫（萬一不全是中文），然後進行分割，split(”)把字符串轉成數組

②    遍歷得到的數組，並把每一個元素傳遞給chineseChangePY函數

③    chineseChangePY函數的作用：如果元素不是中文，直接返回；如果是中文，遍歷PinYin.js中的數組，與每個子數組的第二個元素即中文字符串對比，如果元素在這個中文字符串里，返回中文字符串所在數組的第一個元素，即所需要的拼音

④    將處理過的數組轉成字符串

⑤    和input進行對比，存在返回true，不存在返回false

bug說明： 比如遇到生僻字的時候，PinYin.js中沒有收錄進這個中文，就無法匹配。比如遇到多音字的時候，「藏」：既可以cang也可以zang，cang排在zang前面，當遍歷匹配的時候遇到cang就已經返回了，所以如果有用戶輸入zang就匹配不到藏字。

如果有更好的方法，歡迎討論交流。

邊輸入拼音邊查找匹配的項目怎樣實現

用js響應輸入框的變化，用ajax傳回後台，後台jsp根據接收的字符，去數據庫查找相關詞句，再返回前台，ajax接收到jsp返回的代碼後，顯示在前台。

exjs, combox 如何設置默認值保存到數據庫里

Composite root = new Composite(“root”);

root.Add(new Leaf(“Leaf A”));

root.Add(new Leaf(“Leaf B”));

Composite comp=new Composite(“Composite X”);

comp.Add(new Leaf(“Leaf XA”));

comp.Add(new Leaf(“Leaf XB”));

root.Add(comp);

js動態添加input標籤 easyui combox

方法一：

1 var data, json;

2 json = ‘[{“id”:”年計劃”,”text”:”年計劃”,”selected”:true}]’;

3 data = $.parseJSON(json);

4 $(“#rwlb”).combobox(“loadData”, data);

方法二：

1 var data,json;

2 data = [];

3 data.push({ “text”: “測試”, “id”: 100 });

4 $(“#rwlb”).combobox(“loadData”, data);

javascript中文按照拼音首字母排序，如何實現？

中文拼音排序一直都是很有趣的一個問題。推薦使用這個函數 String.prototype.localeCompare()，鏈接 MDN。首先用 localeCompare 試下拼音排序

var array = [‘武漢’, ‘北京’, ‘上海’, ‘天津’];

array.sort(

function compareFunction(param1, param2) {

return param1.localeCompare(param2);

}

);

array // [“北京”, “上海”, “天津”, “武漢”]

然後根據 26 個英文字母分組排序，函數如下，

function pySegSort(arr) {

if(!String.prototype.localeCompare)

return null;

var letters = “*abcdefghjklmnopqrstwxyz”.split(”);

var zh = “阿八嚓噠妸發旮哈譏咔垃痳拏噢妑七呥扨它穵夕丫帀”.split(”);

var segs = [];

var curr;

letters.forEach(function(item,i){

curr = {letter: item, data:[]};

arr.forEach(function(item2){

if((!zh[i-1] || zh[i-1].localeCompare(item2) = 0) item2.localeCompare(zh[i]) == -1) {

curr.data.push(item2);

}

});

if(curr.data.length) {

segs.push(curr);

curr.data.sort(function(a,b){

return a.localeCompare(b);

});

}

});

return segs;

}

測試：

pySegSort([“我”,”不”,”懂”,”愛”,”啊”,”按”,”已”,”呀”,”選”,”縣”])

結果：

[{“letter”:”a”,”data”:[“啊”,”愛”,”按”]},{“letter”:”b”,”data”:[“不”]},{“letter”:”d”,”data”:[“懂”]},{“letter”:”w”,”data”:[“我”]},{“letter”:”x”,”data”:[“縣”,”選”]},{“letter”:”y”,”data”:[“呀”,”已”]}]

var arr = [“張三”,”李四”,”王五”,”阿三”]; 

document.write(arr+””);

arr.sort(function(a,b){

return a.localeCompare(b);

});

document.write(arr);

定義和用法：

用本地特定的順序來比較兩個字符串。

語法：

stringObject.localeCompare(target)

參數描述：

target    要以本地特定的順序與 stringObject 進行比較的字符串。  

返回值：

說明比較結果的數字。如果 stringObject 小於 target，則 localeCompare() 返回小於 0 的數。如果 stringObject 大於 target，則該方法返回大於 0 的數。如果兩個字符串相等，或根據本地排序規則沒有區別，該方法返回 0。

說明：

把 和 運算符應用到字符串時，它們只用字符的 Unicode 編碼比較字符串，而不考慮當地的排序規則。以這種方法生成的順序不一定是正確的。例如，在西班牙語中，其中字符 「ch」 通常作為出現在字母 「c」 和 「d」 之間的字符來排序。

localeCompare() 方法提供的比較字符串的方法，考慮了默認的本地排序規則。ECMAscript 標準並沒有規定如何進行本地特定的比較操作，它只規定該函數採用底層操作系統提供的排序規則。

參考資料

百度知道.百度知道[引用時間2018-1-5]

急!!!Combox按拼音查詢

告訴你個農民辦法哦！

不過絕對可行！

用數據庫！

三列:

id 簡寫 城市名

1 bj 北京

2 bd 保定

3 bt 包頭

4 bh 北海

在窗體load的時候加載到某個全局數據集裏面來！

每當combox文本改變的時候就去這個數據集裏面找對應的就行了！