閉じるボタンここ

で選択したオプションの上にボックスを描画するためにどのようにこのコードを実行する上で閉じるボタンここ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>search</title> 

<script type="text/javascript" src="jquery-1.2.1.pack.js"></script> 
<script type="text/javascript"> 
    function lookup(inputString) { 
     if(inputString.length == 0) { 
      $('#suggestions').hide(); 
     } else { 
      $.post("rpc.php", {queryString: ""+inputString+""}, function(data){ 
       if(data.length >0) { 
        $('#suggestions').show(); 
        $('#autoSuggestionsList').html(data); 
       } 
      }); 
     } 
    } 

    function fill(thisValue) { 
     $('#inputString').val(thisValue); 
     setTimeout("$('#suggestions').hide();", 200); 
    } 
</script> 

<style type="text/css"> 
    body { 
     font-family: Helvetica; 
     font-size: 11px; 
     color: #000; 
    } 

    h3 { 
     margin: 0px; 
     padding: 0px; 
    } 

    .suggestionsBox { 
     position: relative; 
     left: 30px; 
     margin: 10px 0px 0px 0px; 
     width: 200px; 
     background-color: #212427; 
     -moz-border-radius: 7px; 
     -webkit-border-radius: 7px; 
     border: 2px solid #000; 
     color: #fff; 
    } 

    .suggestionList { 
     margin: 0px; 
     padding: 0px; 
    } 

    .suggestionList li { 

     margin: 0px 0px 3px 0px; 
     padding: 3px; 
     cursor: pointer; 
    } 

    .suggestionList li:hover { 
     background-color: #659CD8; 
    } 
</style> 

</head> 

<body> 

    <div> 
     <form> 
      <div> 
       Type the Product name: 
       <br /> 
       <input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" /> 
      </div> 

      <div class="suggestionsBox" id="suggestions" style="display: none;"> 
       <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" /> 
       <div class="suggestionList" id="autoSuggestionsList"> 
        &nbsp; 
       </div> 
      </div> 
     </form> 
    </div> 

</body> 
</html>

.........コードです。テキストボックスが表示されます。提案を表示すると、正しい提案を選択することができます。提案をクリックすると、提案がプレーンテキストとして読み込まれます。例えば。テキストボックスに「b」と入力すると、「ブラウザ」などが表示されます。ブラウザをクリックするとテキストボックスでプレーンテキストとして更新されます。私はボックスにする必要があります... stackoverflowのように私たちは "ボックスのように表示される"のようなオプション "タグ"。私はそれのようにする必要がありますか？それを実装する方法???

出典

2011-06-19 learn

それはあなたが追加しているものだから、それはプレーンテキストとして表示されます。

$('#autoSuggestionsList').html(data);

ではなく、スタイルの要素を追加します。

$('#autoSuggestionsList').append($('<span />') 
    .html(data) 
    .addClass('suggestion') 
     .append($('<button />') 
      .html('close') 
      .click(function() { 
       $(this).closest('suggestion').remove(); 
      }) 
     ) 
    )

CSS：

.suggestion { display:block-inline; border:1px solid black; padding:2px 5px; }

出典

2011-06-19 09:06:21

を閉じるボタンを追加する方法そのためには閉じるボタンをクリックするとその選択を解除するのですか？ – learn

があなたのリクエストを反映するように編集されました。 –

yaありがとう..しかし、それは私のために働いていないのですか？ – learn

答えて

関連する問題