AJAXをIIS ( .net では無いです。)で行いたいです。

やりたいことは、input field に文字をいれ候補がフィールドの下にtextBoxでリスト化されて、それの選択した物がinputFieldに反映される。
です。
似たのはあるようですが、いまいちです。
ただのASPでの実装例があまりなくお願いします。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2007/09/11 17:09:44
  • 終了:2007/09/18 17:10:03

回答(1件)

id:q_taro4 No.1

q_taro4回答回数83ベストアンサー獲得回数12007/09/13 02:00:42

id:Paradise

ASP.NET で利用すると書かれてますが?

質問にも書いた様にベタなASP環境での話でお願いします。(それともできるのというので回答をしていただいたのでしょうか?)

2007/09/13 10:23:17
  • id:Paradise
    最初の回答は役に立たないが時間切れでポイントが行ってしまった。


    結局以下のやり方で動作確認がとれました。
    参考までに、、、

    しかし、べたなIISだと非常に大変だと思うのはわたしだけか?


    --- html部分 ---
    <body>
    <script type="text/javascript" charset="UTF-8" src="initcompletion.js"></script>
    <script src="complete2.js"></script>

    <form>
    お名前のイニシャル:
    <input type="text" id="query" onkeyup="peekQuery(this.value)">&nbsp <font color="Crimson"></font>
    </form>

    <p><span id="txtHint"></span> </font></p>
    </li>
    </body>
    </html>
    --- html部分 ---

    --- ASP部分 ---
    <%
    response.expires=-1

    dim a(31)

    Dim CRLF

    CRLF = Chr(13) & Chr(10)

    'Fill up array with names
    a(1) = "Karuishi"
    a(2) = "Koutaka"
    a(3) = "Igarashi"
    a(4) = "Koguchi"
    a(5) = "Chung"
    a(6) = "Sugita"
    a(7) = "Hirano"
    a(8) = "Kawakuchi"
    a(9) = "Nakajima"
    a(10)= "Ogasawara"

    'get the q parameter from URL
    q = ucase(request.querystring("query"))

    if len(q)>0 then
    hint=""
    for i=1 to 31
    if q = ucase(mid(a(i),1,len(q))) then
    response.write ( a(i) & vbCrLF )
    end if
    next
    end if

    %>
    --- ASP部分 ---

    --- java script部分 (initCompletion.js)---
    function initCompletion(input) {

    input.__completionitems = document.createElement("div");
    input.__completionitems.style.display = "none";
    input.__completionitems.style.borderStyle = "solid";
    input.__completionitems.style.borderWidth = "1px";
    input.__completionitems.style.position = "absolute";
    input.__completionitems.style.textAlign = "left";

    document.body.appendChild(input.__completionitems);

    input.clearCompletionItems = function () {
    this.__completionitems.innerHTML = "";
    this.__completionitems.style.display = "none";
    }

    input.setCompletionWidth = function(w) {
    input.__completionitems.__width = w;
    }

    input.showCompletionItems = function (ary, callback) {

    var x = 0; var y = 0;
    for (var o = this; o ; o = o.offsetParent) {
    x += (o.offsetLeft); y += (o.offsetTop);
    }

    this.clearCompletionItems();

    var ci = this.__completionitems;
    /*ci.style.width = (ci.__width ?
    ci.__width : this.offsetWidth + "px")*/
    ci.style.width = "500px";
    ci.style.top = y + this.offsetHeight + "px";
    ci.style.left = x + "px";
    ci.style.display = "block";

    function __addItem(n) {
    var div = document.createElement("div");
    div.style.cursor = "pointer";
    div.style.backgroundColor = "white";
    div.style.font='normal 11px Osaka';

    div.onmouseover = function() {
    this.style.backgroundColor = "#36c";
    this.style.color = "white";
    }

    div.onmouseout = function() {
    this.style.backgroundColor = "white";
    this.style.color = "black";
    }

    div.onclick = function() { callback(n); }
    div.innerHTML = ary[n];
    ci.appendChild(div);
    }

    for (var i = 0; i < ary.length; ++i) __addItem(i);
    }

    return input;
    }

    --- java script部分 (initCompletion.js)---

    //var xmlHttp

    function createXmlHttpRequest() {
    var xmlHttp = false;


    // alert("createXmlHttpRequest route1");

    if( window.XMLHttpRequest) {
    xmlHttp = new XMLHttpRequest();
    //alert("createXmlHttpRequest route1");
    } else if(window.ActiveXObject) {
    try {
    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    alert("createXmlHttpRequest route2");
    }
    return xmlHttp;
    }

    var oldquery = "";
    //var xmlhttp = 0;
    var input = 0;

    var xmlHttp


    function peekQuery (str)
    {

    if (! xmlHttp) xmlHttp = createXmlHttpRequest();

    if (! xmlHttp || xmlHttp.readyState == 1 ||
    xmlHttp.readyState == 2 || xmlHttp.readyState == 3){
    return;
    }

    var textbox = document.getElementById("query");
    var query = encodeURI(textbox.value);

    initCompletion(textbox);


    // xmlHttp=GetXmlHttpObject()
    // if (xmlHttp==null) {
    // alert ("Your browser does not support AJAX!");
    // return;
    // }

    /***
    var url="test.asp";

    url=url+"?q="+str;
    url=url+"&sid="+Math.random();
    xmlHttp.onreadystatechange=stateChanged;

    alert(url);
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
    ***/


    if (query == "") {
    textbox.clearCompletionItems();
    }
    else if (oldquery != query) {
    //alert("222test!!---" + query);

    xmlHttp.onreadystatechange=stateChanged;
    xmlHttp.open("GET", "test.asp?" + "query=" +query, true);
    //xmlHttp.send(null);

    xmlHttp.onreadystatechange = function() {

    //"readyState == 4"は、操作に対するレスポンスが完全にダウンロードされたらの意味だ
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200 && xmlHttp.responseText != "") {

    //alert( "--->サーバからの受信文字=" + xmlHttp.responseText ); //<---Serverから送られたTextを表示してみる
    var ary = xmlHttp.responseText.split(/\n/);
    textbox.showCompletionItems(ary,
    function(n) {
    textbox.value = ary[n];
    //alert( "--->event2" + textbox.value);
    textbox.clearCompletionItems();
    oldquery = encodeURI(textbox.value);
    }
    );

    }

    //alert("これが可笑しい関数だ!");
    }

    xmlHttp.send(null)

    }

    //xmlHttp.onreadystatechange=stateChanged;
    //xmlHttp.open("GET", "test.asp?" + "query=" +query, true);
    //xmlHttp.send(null);

    oldquery = query;

    }

    /* onload = function() { setInterval("peekQuery()",800) ; } */


    ///////////////////////////////////////////////////////////////

    function stateChanged()
    {
    if (xmlHttp.readyState==4) {
    document.getElementById("txtHint").innerHTML=xmlHttp.responseText;

    var ary = xmlHttp.responseText.split(/\n/) ;
    textbox.shoCompletionItems(ary,function(n) {textbox.clearCompletionItem(); }) ;
    }
    }

    function GetXmlHttpObject()
    {
    var xmlHttp=null;

    try {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
    catch (e) {
    // Internet Explorer
    try {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e) {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    }
    return xmlHttp;

    }

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません