0

ユーザーが「a」と入力すると、「a」で始まるすべての名前がドロップダウン メニューに表示されるように、JavaScript でオートコンプリート リストを実装しました。ドロップダウンメニューのユーザー入力に応じて、テキストを太字にしたいと思います。したがって、ユーザーが「ab」と入力すると、「ab」という単語を含むドロップダウン メニューに文字「ab」が太字で表示されます。

名前を表示しているJSコードの一部を次に示します。

document.getElementById('dropmenu').style.visibility='visible';
var element = document.createElement("div");
var namecontainer = document.createElement("div");
namecontainer.setAttribute('id', "name" + div_id);
namecontainer.className = "namecontainerclass";
element.setAttribute('id', "div" + div_id);
element.className = "elementclass";
var text = document.createTextNode(myArray[i].name);

element.appendChild(text);

document.getElementById('dropmenu').appendChild(namecontainer);


document.getElementById("name" + div_id).appendChild(element);

var img=document.createElement("img");



img.setAttribute("src", myArray[i].image);
img.setAttribute("width", 25);
img.setAttribute("height", 25);

namecontainer.appendChild(img);
4

1 に答える 1

0

これが頭に浮かんだことです。ユーザー入力を名前（myArray [i] .name）と照合し、その時点でいくつかtextnodes（またはelement一致する場合はan）を作成し、それらをコンテナー要素（divこの場合はa）に追加します。私はそれをテストしませんでしたが、javascriptフレームワークを使用せずにこのハイライトを処理する方法を示すための少しの擬似コードです。

// searchString is the string entered by the user...
// split by the searchString, but group the selection so the matches 
// also get added to the result array.

var match = new RegExp('\\('+ searchString +')\\',"gi");

var textParts = myArray[i].name.split(match);
var nodes = [];
var element = document.createElement("div");

// only create elements for names that actually match.
// if there is only one match, there wasn't a match by the split 
if (textParts.length > 1){
  for(i = 0; i < textParts.length; i++){
     if (textParts[i] == searchString) {
       nodes[i] = document.createElement("em");
       nodes[i].createTextNode(searchString);
     } else {
       nodes[i] = document.createTextNode(textparts[i]));
     }
     element.appendChild(nodes[i]);
  }

}
于 2012-10-04T07:20:14.837 に答える