Chinese Character Lookup

by LinguList

HTML

<script src="https://calclab.org/examples/ids-data.js" type="text/javascript"></script>
  <h1>Quick Chinese Character Lookup Tool</h1>

  <input type="text" placeholder="type two pinyin values or character components" style="width:300" id="text" onkeyup="startsearch(this.value)"></input>
  <div id="output"></div>

CSS

tr {
  border: 1px solid blue;
}
td {
  border: 1px solid lightgray;
}
th {
  border: 1px solid lightblue;
}
#output {
  margin-top: 20px;
}

JavaScript

function getUnicode(char) {
  var code = char.charCodeAt(0).toString(16).toUpperCase();

  while (code.length < 4) {
        code = "0" + code;
  }
  return code;
}

function isChinese(char) {
  var code = char.charCodeAt(0);
  console.log(code);
  if (
    (0x3400 <= code && code <= 0x9fff) ||
    (0x20000 <= code && code <= 0x2ceaf) ||
    (0x2f800 <= code && code <= 0x2fa1f)
  ) {
    return true;
  }
  return false;
}

function startsearch(value){
  var i, j, c, val, visited;
  value = value.trim();
  
  var values = [""];
  for (i = 0; i < value.length; i += 1) {
    c = value[i];
    if (isChinese(c)) {
      values[values.length - 1] += c;
      values.push([""]);
    }
    else if (c == " ") {
      values.push([""]);
    }
    else {
      values[values.length - 1] += c;
    }
  }
  // retain values with value
  var new_values = [];
  for (i = 0; i < values.length; i += 1) {
    if (values[i][0] && new_values.indexOf(values[i][0]) == -1) {
      new_values.push(values[i]);
    }
  }

  console.log(value, values, new_values);
  var matches = {};
  var results = {};
  for (i = 0; i < new_values.length; i += 1) {
    val = new_values[i];
    if (val in DATA) {
      visited = [];
      for (j = 0; j < DATA[val].length; j += 1) {
        c = DATA[val][j];
        if (c[0] in matches && visited.indexOf(c[0]) == -1 ) {
          matches[c[0]] += 1;
        }
        else {
          matches[c[0]] = 1;
          results[c[0]] = [c[1], c[2]];
          visited.push(c[0]);
        }
      }
    }
  }
  console.log(matches);
  var table = [];
  for (c in matches) {
    if (matches[c] == new_values.length) {
      table.push([c, results[c][0], results[c][1]]);
    }
  }
  var out = '<table>';
  out += '<tr><th>Character</th><th>Unicode</th><th>Pinyin</th><th>Structure</th></tr>';

  for (i = 0; i < table.length; i += 1) {
    out += '<tr>';
    out += '<td>' + table[i][0] + "</td>";
  ...