การทำ autocomplete โดยอาศัยพื้นฐานจาก tooltip
อาจารย์ครับผมดูการทำ 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 ที่ค่าใดค่าหนึ่ง
ขอบคุณครับ
บังเอิญว่าในหน้าเวบของผมมี 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 ที่ค่าใดค่าหนึ่ง
ขอบคุณครับ
เราอาจใช้ div เฉพาะของแต่ละ text box เลยก็ได้ โดยใช้ CSS ควบคุมมัน ให้แสดง ใกล้ๆกล่องข้อความที่เป็นเจ้าของ เมื่อไม่ใช้ ก็ซ่อนมันซะ ไม่จำเป็นต้องใช้ tooltip เลยครับ
เขียนคำสั่ง อ้างส่วนต่างๆที่เกียวข้องให้ถูก ซึ่งก็หมายถึงเขียน javascript ให้ถูกนั่นแหละ
<div onclick = "doClick('input_id', 'value')">value</div>
function doClick(input, value) {
document.getElementById(input).value = value;
}
ประมาณนี้แหละครับ และ ยังอาจมีอีกหลายวิธี
ทันใจเลย
เดียวจะไปลองครับ
ติดตามต่อที่นี่ http://www.goragod.com/ex/ajax_finder.php
ขอบคุณครับอาจารย์