2016-07-20 5 views
0

私はコードを持っています: 単一の文字列を検索し、文字列全体を返す。どのように単一の文字列を一致させ、jsを使って全体の文字列を返すか

例えば

$(document).ready(function() { 
 
$('button').click(function(){ 
 
var search = $('#input').val(); 
 
var str = $('#file').html(); 
 
var output=str.match(search); 
 
document.getElementById("result").innerHTML = output; 
 
    
 
    if (search.value.length > 0) { 
 
    $(".oh").show().filter(function() { 
 
    return $('#input').find('li').text().toLowerCase().indexOf($("search").val().toLowerCase()) == -1; 
 
    }).hide(); 
 
} 
 
else { 
 
    $(".oh").show(); 
 
    document.getElementById('oh').style.display = 'block'; 
 
} 
 
}); 
 
});
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
<script src="searchbox.js"></script> 
 
</head> 
 
<body> 
 

 
<input type="text" id="input"> 
 
<button>solve</button> 
 

 
<p id="result"></p> 
 
<div id="file"class="oh"style="display:none;"> 
 
<li>beatiful</li> 
 
<li>happy sunday</li><li>good morning</li><li>good evening</li><li>oh my god</li>I like u</li><li>wonderful day</li> 
 

 
<li>good aftnoon</li> 
 

 
</div> 
 

 
</body> 
 
</html>

に:HTML 内の検索ボックスのような

`input = good 
output = good morning, 
      good night, 
      good noon` 

`input = morning, 
output = good morning` 

その私はjqueryのを使用してい任意の提案で私を助けたり、私のためにそのがより便利に私のコードを修正してくださいとindex()は使用していますが、動作していません。

+0

無効なマークアップを持っています。それが問題を作り出す理由です。 – Jai

+0

私はhtmlの新人です –

+0

は答えを掲載しました。それを見てください。 – Jai

答えて

0

これを確認してください。そして、動作するようにコードを変更:

$(document).ready(function() { 
 
    $('button').click(function() { 
 
    var search = $('#input').val(); // get the search term 
 
    var $lis = $('#file li'); // all the existing li items to filter/search 
 
    var $resUl = $('#result ul'); // the ul to show results 
 

 
    var o = $lis.map(function() { // map will let you loop through list items 
 
     if (this.textContent.indexOf(search) != -1) { // check if the current li in the iteration has the search term 
 
     return $(this).clone(); // if yes then return a copy of it. 
 
     } 
 
    }).get(); // .get() will create an array when used with .map() 
 
    $resUl.empty(); // always clear the result ul 
 
    $.each(o, function(i, item) { // loop through the array created via filter 
 
     $resUl.append(item).find('li').fadeIn(); // here append them as lis are hidden so fade them in the view to show. 
 
    }); 
 

 
    }); 
 
});
#file li { 
 
    display: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 

 
<input type="text" id="input"> 
 
<button>solve</button> 
 

 
<div id="result"> 
 
    <ul></ul> 
 
</div> 
 
<ul id="file"> 
 
    <li>beatiful</li> 
 
    <li>happy sunday</li> 
 
    <li>good morning</li> 
 
    <li>good evening</li> 
 
    <li>oh my god</li> 
 
    <li>I like u</li> 
 
    <li>wonderful day</li> 
 
    <li>good aftnoon</li> 
 
</ul>

+0

「good」と入力した場合は「good afternoon」ですが、入力文字列は3つの関数と一致します 'good afternoon、good morning、good evening'完全一致した文字列をフルラインで表示したいと思います。 –

+0

@jaiの働きに感謝します –

+0

あなたは歓迎して、この答えに印を付けることを忘れないでください。 – Jai

0
$(document).ready(function() { 
    $('button').click(function(){ 
     var searchval = $('#input').val(); 
     var str = $('#file').html(); 

     var rep2 = str.split('</li>'); 
     var rep3 = rep2.filter(function(item){ 
      if(item.search(searchval) !=-1){ 
       return item; 
      } 
     }) 
     document.getElementById("result").innerHTML = rep3; 
    }); 
}); 
関連する問題