2017-06-13 18 views
1

タイトルは少しばかりですが、私の問題は以下で説明します。私は現在、ライブ検索を持っている瞬間最初の単語の後のすべてを削除するJS

image1

これは、私はそれが何をしたいのかないが、もちろん、それは、JSの少しでのみ可能です。

あなたが検索から得たオプションの1つをクリックすると、通常はリンクが表示されますが、下のJSを追加して、そこからすべてのHTMLコードを削除し、テキストボックスにドロップダウンします。

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#livesearch").click(function(){ 
      var value = $(this).html(); 
      var input = $('#append_value'); 
      var content = value; 
      var text = $(content).text(); //removes all HTML 
      input.val(text); 
     }); 
    }); 
</script> 

これはすべて完璧なことですが、問題はあります。それは、テキストボックスに両方のオプションを追加ダウンドロップからのオプションを選択すると:今

image2

、これは上記のコードとは何かを持っているかもしれないが、私はちょうど、ユーザーが選択したいずれかのオプションたいですテキストボックスに追加します。

たとえば、私は戦場を探して、battlefield1battlefield2という結果を得ます。ユーザーがbattlefield2を選択した場合は、battlefield2をテキストボックスに挿入したいと思います。

私は午後1時以来これをやろうとしていました。私は、私が解決策を探すのに多くの時間を要したと言います。

ご協力いただきありがとうございます。 :)

編集:

私は(はい、私はSQLが廃止されて実現)で検索をやっている:

index.htmlを

<script type="text/javascript"> 
    function lightbg_clr() { 
     $('#qu').val(""); 
     $('#textbox-clr').text(""); 
     $('#search-layer').css({"width":"auto","height":"auto"}); 
     $('#livesearch').css({"display":"none"}); 
     $("#qu").focus(); 
    }; 

    function fx(str) { 
     var s1=document.getElementById("qu").value; 
     var xmlhttps; 
     if (str.length==0) { 
      document.getElementById("livesearch").innerHTML=""; 
      document.getElementById("livesearch").style.border="0px"; 
      document.getElementById("livesearch").style.display="block"; 
      $('#textbox-clr').text(""); 
      return; 
     } 
     if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttps=new XMLHttpRequest(); 
     } else {// code for IE6, IE5 
      xmlhttps=new ActiveXObject("Microsoft.XMLHTTPS"); 
     } 
     xmlhttps.onreadystatechange=function() { 
      if (xmlhttps.readyState==4 && xmlhttps.status==200) { 
       document.getElementById("livesearch").innerHTML=xmlhttps.responseText; 
       document.getElementById("livesearch").style.display="block"; 
       $('#textbox-clr').text("X"); 
      } 
     } 
     xmlhttps.open("GET","scripts/search_friends.php?n="+s1,true); 
     xmlhttps.send(); 
    } 
</script> 
<input type="text" onKeyUp="fx(this.value)" autocomplete="off" name="qu" id="qu" class="form-control" placeholder="Name of the person or group"> 
<div class="list-group" id="livesearch"></div> 
<input type="text" id="append_valueq"> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#livesearch").click(function(){ 
      var value = $(this).val(); 
      var input = $('#append_valueq'); 
      var content = value; 
      var text = $(content).text(); 
      input.val(text); 
     }); 
    }); 
</script> 

search_friends。 PHP

<?php 
include('../Connections/ls.php'); //script to connect to DB 
$s1=$_REQUEST["n"]; 
$select_query="SELECT * FROM users WHERE Username LIKE '%".$s1."%'"; 
$sql=mysql_query($select_query) or die (mysql_error()); 
$s=""; 
while($row=mysql_fetch_array($sql)) 
{ 
    $s=$s." 
    <a href='javascript:void(0)'>".$row['Username']."</a> 
    " ; 
} 
echo $s; 
?> 

これは最終的に私にあなたが最初のイメージで見る結果を与えます。

...私は今、私がいる問題は、div要素がライブサーチ(<div class="list-group" id="livesearch"></div>)のIDを持っているという事実があることを認識していますので、代わりにドロップダウンの実際のオプションの全体のdivを選択します

+1

質問を編集して関連するHTMLを表示してください。 'value'変数の値は何ですか? (別として、 'var content = value;'は無意味ですが、同じ値を持つ2つの変数になります) – nnnnnn

+0

@nnnnnnこのコメントのために、私が追加しようとしている方法に何か間違っていることを認識しましたテキストボックスに入力します。 – JeanPaul98

答えて

0

値を取得中にhtml()の代わりに.val()を使用してみてください。

+0

私はそれを試しても何も起こらない。しかし、あなたの返信をありがとう。 – JeanPaul98

0

これを行うには、実際には簡単な方法があります。

あなたのHTMLコードを提供していないので、私は何をしたのかを示します。あなたがIDでハッシュタグ/ポンド記号が含まれていないことを確認してください

document.getElementById("dropdown").value(); 

は、あなたがクリックの価値を得ることができます。

次に、この値を適用することができ、あなたはヴァルそれを呼び出すとしましょう、この方法:。 のdocument.getElementById(「テキストボックス」)値=私はJSFiddleその種-のショーを作成しましたヴァル

コンセプト。自分のコードで動作させることができるかどうかを確認してください:https://jsfiddle.net/1j4m1ekc/7/

問題が解決しない場合は、私に知らせてください。私はあなたのHTMLを見たいと思います。

+0

'.value'はプロパティであり、メソッドではありません。 – nnnnnn

+0

自分のHTMLで更新しました – JeanPaul98

0

私がやりたいことをするための別の方法が見つかったので、すぐに解決策は必要ありませんが、Stackoverflowコミュニティの他の人にはこれに似た質問があると大いに感謝します。解決策が必要です。私が見つけた解決策は以下の通りです。

これはまだライブ検索と見なされていますが、スクロール可能なコンテナを作成し、そのコンテナ内のすべてのユーザーをリストしたので、次のようになります。今

image1

私は検索ボックスからの入力に一致しないと、すべてのユーザーをフィルタするスクリプトをオンラインで発見したコンテナから。私が見つけたスクリプトはここからです:Live Searchと、スクリプトの仕組みに関するデモを見たい場合は、View Demoです。だから今、私は、テキストボックスに検索語を入力したとき、それはこの

enter image description here

のように見えるこれが最大の解決策ではないかもしれないが、それは私の作品と私はそれが何をしたいのかありません。多分あなたのために働くでしょう:)

関連する問題