JavaScript Listenelement anklicken und Wert anzeigen

[koffi]

hallo!

ich habe auf meiner webseite eine liste. sobald man einen text dieser liste anklickt, möchte ich dass dieser text in einem textfeld angezeigt wird.
bei einem klick wird jedoch das hier ausgegeben: [object HTMLDivElement]

hier der code:

$("#name_dropdown_list_items").click(function(){
    $("#name_input").val(this);
});

was mache ich falsch?

 

[Daaron]

du musst dir eher den innerHTML - Wert ausgeben lassen, und dann da natürlich weitere HTML-Tags herausfiltern.

 

[Yuuri]

$('select').change( function() {
  $('#input').val( $(this).val() );
} );

Passt da schon eher.

 

[koffi]

@daaron: verstehe leider nicht genau wie du das meinst

@yuuri: auf diese weise wird in meinem textfeld dann einfach garnichts ausgegeben.

vielleicht erkläre ich genauer wie das ganze aufgebaut ist. ich möchste einen live search machen. wenn mann ein paar buchstaben in das textfeld eingibt, werden namen aus einer datenbank gesucht und in einer liste unter dem textfeld aufgelistet (wie die suchzeile bei facebook zB). ich möchte eben, dass wenn man dann auf einen dieser namen klickt, dieser name direkt im textfeld steht, ohne dass man den namen voll ausschreiben muss.

hier der html teil

<div class="inputs">
                  <label>To</label></br>        
                  <input id="name_input" name="name_input" type="text" class="required" id="name" size="30" />           
                </div> 
                <div id="name_dropdown_list">
                <ul>
				<div id="name_dropdown_list_items"></div>
				</ul>    
				</div>

und das jquery script dazu (auf yuuris vorschlag angepasst)

$("#name_dropdown_list_items").hide();
$("#feedback input[name=name_input]").keyup(function(){
	if( $(this).val().length >= 1 ){
		$("#name_dropdown_list_items").show().html('searching..');
		$.ajax({
			url: 'scripts/livesearch.php',
			data:'name='+$(this).val(),
			type:'GET',
			success: function(data) {
				$("#name_dropdown_list_items").html(data)
			}
		});
	}
});
$(document.body).click(function(){
	$("#name_dropdown_list_items").hide();
});
$("#name_dropdown_list_items").click(function(){
    $("#name_input").val( $(this).val() );
} );

 

[Yuuri]

Warum nimmst du dann nicht das fertige Autocomplete?

Bei deinem Ansatz müsstest du einfach $("#name_dropdown_list_items > *").click bzw. $("#name_dropdown_list_items").children().click einsetzen, je nach Aufbau.

 

[Daaron]

Ich weiß schon, wieso ich lieber mit Mootools arbeite... jQuery's val() klingt für mich so, als würde es das Value-Attribut zurückgeben....

Du solltest dir übrigens darüber im Klaren sein, dass <ol> und <ul> nur <li> als direkte Kindelemente haben dürfen. Dein Konstrukt da haut dir der Validator 3x um die Ohren.

 

[koffi]

das funktioniert leider alles nicht jedesmal bleibt das textfeld wie vorher, nach einem klick.
etwas vorgefertigtes will ich nicht einbauen, erstens weil ichs einfach selber machen will , und zweitens denke ich dass das einbauen mehr zeit in anspruch nehmen wird als das fertigstellen meines eigenen konstruktes.

edit:
habe es nun hinbekommen mit einer eigenen funktion, ausgelöst durch onclick event des listenelements.

function fill_name_field(value) {
				$(document).ready(function() {
					$("#name_input").val(value);
				});
			}