GORAGOD.com

freelance, web developer, web designer, hosting, domain name

การทำ 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 ที่ค่าใดค่าหนึ่ง

ขอบคุณครับ
18 ก.พ. 2553 3 4,083

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

เราอาจใช้ 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
ความคิดเห็น
ไฟล์อัปโหลด ชนิด jpg, jpeg ขนาดไฟล์ไม่เกิน 2M
^