2016-07-20 4 views
0

zurückgibt Ich habe code: Um eine einzelne Zeichenkette zu suchen und die ganze Zeichenkette zurückzugeben.wie man die einzelne Zeichenkette zusammenbringt und die ganze Zeichenkette mit 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>

Zum Beispiel:

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

`input = morning, 
output = good morning` 

Es ist wie ein Suchfeld in HTML Bitte helfen Sie mir mit jedem Vorschlag oder korrigieren sein mein Code hilfreich für mich, den ich verwenden jquery haben und index() verwenden, aber es funktioniert nicht

+0

Sie haben einen ungültigen Markup. Deshalb schafft es Probleme. – Jai

+0

Ich bin ein neuer zu html –

+0

gepostet eine Antwort. siehst du das. – Jai

Antwort

0

Überprüfen Sie dies, ich habe Ihr Markup wenig aktualisiert und änderte den Code an die Arbeit:

$(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

wenn ich mit 'guter' Ausgabe nur' guten Nachmittag' schreibe, aber die Eingabezeichenkette mit drei Funktionen 'guten Nachmittag, guten Morgen, guten Abend' zusammenarbeiteIch möchte alle zusammenpassende Zeichenkette mit voller Linie drucken. –

+0

danke @jai seine Arbeit –

+0

Sie sind willkommen und vergessen Sie nicht, diese Antwort zu markieren. – 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; 
    }); 
}); 
Verwandte Themen