包含一个可以查看JSON并返回下拉列表的搜索框

Question

I'm using a JSON file to populate some drop down menus for various conversions. The converter has grown somewhat and I'd like to have the option of including a search bar.

So a user can search for Milliampere instead of navigating to the 'Current' category within "Electricity" etc etc. I'd just like to make it a bit easier for them.

My JSON only has two fields, the name and value of the drop down, example below. The value is a string in the fashion that I understand so that Milliampere is milliAmpere and various others all using camel case. I don't think it would be suitable to run the search on this field as the values may differ from the name.

The name field in this instance is Milliampere(mA) so I need for the search to be able to look at part of the string and not do a full match ignoring case as the liklihood is the search string would be milliamp or milliampere or even milliamperes.

From there the next step is either to populate the drop downs whilst on that page or to return a list of possible options if there are many.

Is this possible at all and if so can you please guide me in the right direction?

Many thanks!

    "current":[
    {
        "value" : "ampere",
        "name" : "Ampere(A)"
    },
    {
        "value" : "kiloAmpere",
        "name" : "Kiloampere(kA)"
    }]

Answer 1

You can use this JS lib - DefiantJS (defiantjs.com), which extends the global object JSON with a new method: "search". With this method, you can search a JSON structure with XPath expressions, like this:

var data = {
       "current": [
          { "value": "ampere",      "name": "Ampere(A)" },
          { "value": "kiloAmpere",  "name": "Kiloampere(kA)" },
          { "value": "milliAmpere", "name": "milliAmpere" },
          { "value": "Milliampere", "name": "Milliampere" }
       ]
    },
    res = JSON.search( data, '//name[contains(translate(., "MA", "ma"), "millia")]/..' );

console.log( res[0].name );
console.log( res[1].name );

The "translate" method in the expression extends the search to include uppercase and lowercase versions of the letters "ma". If you want to cover all the alphabetic letter, then add all of them.

Here is a working fiddle;
http://jsfiddle.net/hbi99/6ssS9/