【jQuery】検索絞り込み機能を実装し、かつ候補からidを取得し、付与したい

前提

検索ボックスの値をリアルタイムに取得して、部分一致の絞込み検索を実装するところまではできたのですが、これに加えて検索をかけるリストからidを取得し、追加したものにもそのidをつけたいです。分かりづらくすみません。
検索ボックスの値をリアルタイムに取得して、部分一致の絞込み検索を実装に関しては
下記のサイトを参考にしています。
https://www.tam-tam.co.jp/tipsnote/javascript/post11315.html

.search_resultに

検索で引っかかったテキスト を追加したいです。

そもそも違う方法でやった方がいい場合はそちらを教えていただけると助かります。

html

<ul class="search_list"> <li id="new_list"><input type="text"></li></ul><ul class="search_result"></ul><ul id="data">　　　　　　<li id="5">和食</li>　　　　　　<li id="6">洋食</li>　　　　　　<li id="7">中華</li>　　　　　　<li id="8">焼き鳥</li>　　　　　　<li id="9">焼肉</li></ul>

javascript

searchWord = function(){ var searchResult, searchText = $(this).val(), // 検索ボックスに入力された値 targetText, // 検索結果を格納するための配列を用意 searchResult = []; // 検索結果エリアの表示を空にする $('.search_result').empty(); // 検索ボックスに値が入ってる場合 if (searchText != '') { $('#data li').each(function() { targetText = $(this).text(); targetId = $(this).attr('id'); // 検索対象となるリストに入力された文字列が存在するかどうかを判断 if (targetText.indexOf(searchText) != -1) { // 存在する場合はそのリストのテキストを用意した配列に格納 searchResult.push(targetText); } }); // 検索結果をページに出力 for (var i = 0; i < searchResult.length; i ++) { $('.search_result').append('<li>'+searchResult[i]+'</li>'); }

試したこと

searchResult.push(targetText);ではなく、
searchResult = [
{id:targetText,text:targetId}
];
としてみましたが、その場合、検索結果にテキストのみを表示させる方法がわからなかったです。