A-AA+then

การทำ autocomplete โดยอาศัยพื้นฐานจาก tooltip

2,995
อาจารย์ครับผมดูการทำ autocomplete จากหลายที่ แต่ไม่ตรงตามที่ต้องการของตัวเอง จึงกลับมาศึกษา autocomplete ของอาจารย์ อีกครั้งหนึ่ง ซึ่งมันก็เข้าท่าดีล่ะ ตามรูป
บังเอิญว่าในหน้าเวบของผมมี textbox หลายอันต่อกันหลายอันจึงไม่เหมาะ
ไม่รู้ว่าผมจะหัวใสหรือหัวด้านนะครับเหลือบไปเห็น tooltip ของอาจารย์เข้า จึงนำโค้ดมาแก้ไข ก็ได้ดังรูปข้างล่าง

สร้าง textbox ตามนี้

< input type="text" name="resulttarget" id="resulttarget" onkeyup="loadlist(this, 'howto', 'ajax', 36)" >

โค้ดสำหรับเลือกข้อมูลมาแสดง เป็นดังนี้
$str_menu = "SELECT * FROM `unitcateg`";
$strquery_menu = mysql_query($str_menu,$ajax);
$res_menu = mysql_fetch_assoc($strquery_menu);
$rowmenu = mysql_num_rows($strquery_menu);
//หากมีข้อมูล
if($rowmenu!=0) {
do {
 echo "<div onclick=\"document.getElementById['resulttarget'].value='".$res_menu['unitcateg']."'\">".$res_menu['unitcateg']."</div>";
 } while($res_menu = mysql_fetch_assoc($strquery_menu));
}
//จบหากมีข้อมูล

โดย event onclick ที่ใส่เข้าไปนั้น เพื่อรับค่า $res_menu['unitcateg'] ไปแสดงบน textbox ที่มี id='resulttarget'
แต่ปรากฏว่ามี error ซึ่งอาจเป็นเพราะว่าเมื่อ click ที่ค่าที่ต้องการแล้ว ไม่สามารถหา document.getElementById['resulttarget'] เพื่อแสดงข้อมูลได้

ข้อมูลจาก list ที่ได้ อยู่ภายใต้ div ที่มีชื่อว่า 'lyrtooltip' (ตามตัวอย่าง tooltip ของอาจารย์)

รบกวนอาจารย์อธิบาย
- ความสัมพันธ์ระหว่าง div id ที่ชื่อ lyrtooltip กับเอกสารที่เจ้าของ textbox
- ทำอย่างไร เป็นไปได้หรือไม่ที่ จะนำค่าจาก list มาเติมใน textbox เมื่อ click ที่ค่าใดค่าหนึ่ง

ขอบคุณครับ

3 ความคิดเห็น

จริงๆแล้วมันก็มีหลายวิธีที่จะแก้ปัญหานะครับ

เราอาจใช้ div เฉพาะของแต่ละ text box เลยก็ได้ โดยใช้ CSS ควบคุมมัน ให้แสดง ใกล้ๆกล่องข้อความที่เป็นเจ้าของ เมื่อไม่ใช้ ก็ซ่อนมันซะ ไม่จำเป็นต้องใช้ tooltip เลยครับ

เขียนคำสั่ง อ้างส่วนต่างๆที่เกียวข้องให้ถูก ซึ่งก็หมายถึงเขียน javascript ให้ถูกนั่นแหละ

<div onclick = "doClick('input_id', 'value')">value</div>

function doClick(input, value) {
  document.getElementById(input).value = value;
}

ประมาณนี้แหละครับ และ ยังอาจมีอีกหลายวิธี
1

ขอบคุณครับ
ทันใจเลย
เดียวจะไปลองครับ
 
2

ผู้สนใจทั้งหลาย
ติดตามต่อที่นี่ http://www.goragod.com/ex/ajax_finder.php

ขอบคุณครับอาจารย์
3
^