Posted By

Destiny on 02/01/08


Tagged

auto-complete


Versions (?)

Who likes this?

4 people have marked this snippet as a favorite

SpinZ
PapTom
umang_nine
wirenaught


Auto complete


 / Published in: JavaScript
 

usage : onkeypress="show_suggest(event,sender)" ajax.php should return a xml document with the value it found matching in the database. This value should be a substring containing only the letters following the letters that we are searching for.

  1. function dorequest(url,passOn){
  2. var ajaxRequest;
  3. try{
  4. // Opera 8.0+, Firefox, Safari
  5. ajaxRequest = new XMLHttpRequest();
  6. } catch (e){
  7. // Internet Explorer Browsers
  8. try{
  9. ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
  10. } catch (e) {
  11. try{
  12. ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
  13. } catch (e){
  14. // Something went wrong
  15. alert("Request failed");
  16. return false;
  17. }
  18. }
  19. }
  20. // Create a function that will receive data sent from the server
  21. ajaxRequest.onreadystatechange = function(){
  22. if(ajaxRequest.readyState == 4){
  23. display(ajaxRequest.responseText,ajaxRequest.responseXML,passOn);
  24. }
  25. }
  26. ajaxRequest.open("GET",url , true);
  27. ajaxRequest.send(null);
  28. }
  29.  
  30. function display(text, XML, sender){
  31. var name = XML.getElementsByTagName("name")[0].childNodes[0].nodeValue;
  32. var pos = getCaretPosition(sender);
  33. sender.value = sender.value + name;
  34. setCaretPosition(sender,pos);
  35. setSelectionRange(sender,pos,String(sender.value).length);
  36. }
  37. }
  38.  
  39. function setSelectionRange(textElem, selectionStart, selectionEnd) {
  40. if (textElem.setSelectionRange) { // FF
  41. textElem.setSelectionRange(selectionStart,selectionEnd);
  42. } else if (textElem.createTextRange) { // IE
  43. var range = textElem.createTextRange();
  44. range.collapse(true);
  45. range.moveEnd('character', selectionEnd);
  46. range.moveStart('character', selectionStart);
  47. range.select();
  48. }
  49. }
  50.  
  51. function setCaretPosition(ctrl, pos){
  52. if(ctrl.setSelectionRange){
  53. ctrl.setSelectionRange(pos,pos);
  54. }
  55. else if (ctrl.createTextRange) {
  56. var range = ctrl.createTextRange();
  57. range.collapse(true);
  58. range.moveEnd('character', pos);
  59. range.moveStart('character', pos);
  60. range.select();
  61. }
  62. }
  63.  
  64. function getCaretPosition (ctrl) {
  65. var CaretPos = 0;
  66. if (document.selection) {
  67. ctrl.focus ();
  68. var Sel = document.selection.createRange ();
  69. Sel.moveStart ('character', -ctrl.value.length);
  70. CaretPos = Sel.text.length;
  71. }
  72. else if (ctrl.selectionStart || ctrl.selectionStart == '0')
  73. CaretPos = ctrl.selectionStart;
  74. return (CaretPos);
  75. }
  76.  
  77. function show_suggest(e,sender){
  78. var code;
  79. if (!e) var e = window.event;
  80. if (e.keyCode) code = e.keyCode;
  81. else if (e.which) code = e.which;
  82. if (code >= 48 && code <= 90){
  83. var url = "ajax.php?letters="+sender.value;
  84. dorequest(url,sender);
  85. }
  86. }

Report this snippet  

You need to login to post a comment.