Автодобавлялка - index.html

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
<html>
<head>
<title>Ajax auto-suggest</title>
<script type="text/javascript" src="script.js"></script>
<style type="text/css">
body{position:relative}
div.autosuggest{background:url(img_inquisitor/as_pointer.gif) no-repeat top;padding:10px 0 0 0;position:absolute}
div.autosuggest div.as_footer{background:url(img_inquisitor/ul_corner_br.gif)}
div.autosuggest div.as_footer div.as_corner{background:url(img_inquisitor/ul_corner_bl.gif)}
div.autosuggest div.as_header div.as_bar,div.autosuggest div.as_footer div.as_bar{background:#333;height:6px;overflow:hidden}
div.autosuggest div.as_header div.as_corner,div.autosuggest div.as_footer div.as_corner{background:url(img_inquisitor/ul_corner_tl.gif) no-repeat top left;height:6px;left:0;position:absolute;top:0;width:6px}
div.autosuggest div.as_header,div.autosuggest div.as_footer{background:url(img_inquisitor/ul_corner_tr.gif) no-repeat top right;height:6px;overflow:hidden;padding:0 6px;position:relative}
div.autosuggest ul{background:#333;list-style:none;margin:0 0 -4px 0;overflow:hidden;padding:0}
div.autosuggest ul em{color:#6EADE7;font-style:normal}
div.autosuggest ul li{color:#ccc;margin:0 4px 4px;padding:0;text-align:left}
div.autosuggest ul li a{background:transparent;color:#ccc;display:block;padding:0;position:relative;text-decoration:none;text-shadow:#000 0px 0px 5px;width:100%}
div.autosuggest ul li a span{display:block;font-weight:bold;padding:3px 6px}
div.autosuggest ul li a span small{color:#999;font-weight:normal}
div.autosuggest ul li a.tl,div.autosuggest ul li a.tr{background:transparent no-repeat;height:6px;margin:0;padding:0;position:absolute;top:0;width:6px}
div.autosuggest ul li a.tr{right:0}
div.autosuggest ul li.as_highlight a{background:#1B5CCD url(img_inquisitor/hl_corner_br.gif) no-repeat bottom right;color:#fff}
div.autosuggest ul li.as_highlight a span{background:url(img_inquisitor/hl_corner_bl.gif) no-repeat bottom left}
div.autosuggest ul li.as_highlight a span small{color:#ccc}
div.autosuggest ul li.as_highlight a.tl{background:url(img_inquisitor/hl_corner_tl.gif) bottom left;left:0}
div.autosuggest ul li.as_highlight a.tr{background:url(img_inquisitor/hl_corner_tr.gif) bottom right;right:0}
div.autosuggest ul li.as_warning{font-weight:bold;text-align:center}
div.autosuggest ul li a:hover{background:#444}
div.autosuggest ul li.as_highlight a:hover{background:#1B5CCD}
body{position:relative}
div.autosuggest{background:url(img_inquisitor/as_pointer.gif) no-repeat top;padding:10px 0 0 0;position:absolute}
div.autosuggest div.as_footer{background:url(img_inquisitor/ul_corner_br.gif)}
div.autosuggest div.as_footer div.as_corner{background:url(img_inquisitor/ul_corner_bl.gif)}
div.autosuggest div.as_header div.as_bar,div.autosuggest div.as_footer div.as_bar{background:#333;height:6px;overflow:hidden}
div.autosuggest div.as_header div.as_corner,div.autosuggest div.as_footer div.as_corner{background:url(img_inquisitor/ul_corner_tl.gif) no-repeat top left;height:6px;left:0;position:absolute;top:0;width:6px}
div.autosuggest div.as_header,div.autosuggest div.as_footer{background:url(img_inquisitor/ul_corner_tr.gif) no-repeat top right;height:6px;overflow:hidden;padding:0 6px;position:relative}
div.autosuggest ul{background:#333;list-style:none;margin:0 0 -4px 0;overflow:hidden;padding:0}
div.autosuggest ul em{color:#6EADE7;font-style:normal}
div.autosuggest ul li{color:#ccc;margin:0 4px 4px;padding:0;text-align:left}
div.autosuggest ul li a{background:transparent;color:#ccc;display:block;padding:0;position:relative;text-decoration:none;text-shadow:#000 0px 0px 5px;width:100%}
div.autosuggest ul li a span{display:block;font-weight:bold;padding:3px 6px}
div.autosuggest ul li a span small{color:#999;font-weight:normal}
div.autosuggest ul li a.tl,div.autosuggest ul li a.tr{background:transparent no-repeat;height:6px;margin:0;padding:0;position:absolute;top:0;width:6px}
div.autosuggest ul li a.tr{right:0}
div.autosuggest ul li.as_highlight a{background:#1B5CCD url(img_inquisitor/hl_corner_br.gif) no-repeat bottom right;color:#fff}
div.autosuggest ul li.as_highlight a span{background:url(img_inquisitor/hl_corner_bl.gif) no-repeat bottom left}
div.autosuggest ul li.as_highlight a span small{color:#ccc}
div.autosuggest ul li.as_highlight a.tl{background:url(img_inquisitor/hl_corner_tl.gif) bottom left;left:0}
div.autosuggest ul li.as_highlight a.tr{background:url(img_inquisitor/hl_corner_tr.gif) bottom right;right:0}
div.autosuggest ul li.as_warning{font-weight:bold;text-align:center}
div.autosuggest ul li a:hover{background:#444}
div.autosuggest ul li.as_highlight a:hover{background:#1B5CCD}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
<h2>Example (JSON)</h2>
<div>
<form method="get" action="">
<small style="float:right">Hidden ID Field: <input type="text" id="testid" value="" style="font-size: 10px; width: 20px;" disabled="disabled" /></small>
<label for="testinput">Person</label>
<input style="width: 200px" type="text" id="testinput" value="" />
<input type="submit" value="submit" />
</form>
</div>
<h2>Example (XML)</h2>
<div>
<form method="get" action="">
<label for="testinput_xml">Person</label>
<input type="text" id="testinput_xml" value="" style="width:300px" />
<br /><br /><input type="submit" value="submit" />
</form>
</div>
</div>
</div>
<script type="text/javascript">
var options = {
script:"test.php?json=true&",
varname:"input",
json:true,
callback: function (obj) { document.getElementById('testid').value = obj.id; }
};
var as_json = new AutoSuggest('testinput', options);
var options_xml = {
script:"test.php?",
varname:"input"
};
var as_xml = new AutoSuggest('testinput_xml', options_xml);
</script>
</body>